为什么在使用事件侦听器检测更改时图标 类 没有更改？
Why are the icon classes not getting changed when using event listeners to detect changes?
我正在尝试做我自己的看法：https://codepen.io/codifiedconcepts/pen/bwgxRq
我做了一些调整，但是当我在下拉菜单中更改时间时，图标没有按预期更改。我通过手动更改时间和图标进行了测试，并且通过添加警告框测试了事件侦听器 - 一切正常。
但是当我自己去改变下拉菜单时，图标并没有改变。我似乎无法让它工作。
let wakeTime = 7;
let noon = 12;
let lunch = 12;
let evening = 17;
let dinner = 18;
let bed = 21;
//Setting time up
let showCurrentTime = () => {
const clock = document.getElementById('clock');
let currentTime = new Date();
let hours = currentTime.getHours();
let minutes = currentTime.getMinutes();
let seconds = currentTime.getSeconds();
let meridian = "AM";
if (hours >= noon)
{
meridian = "PM";
}
if (hours > noon)
{
hours = hours - 12;
}
// Set Minutes
if (minutes < 10)
{
minutes = "0" + minutes;
}
// Set Seconds
if (seconds < 10)
{
seconds = "0" + seconds;
}
//Putting it all together
let clockTime = `${hours}:${minutes}:${seconds} ${meridian}!`;
clock.innerText = clockTime;
};
//Getting the clock to update on its own so it changes pictures and messages
let updateClock = () => {
let time = new Date().getHours();
let message = document.getElementById('message');
let icon = document.getElementById('food-icon');
if(time === wakeTime){
icon.classList.remove('fa-smile');
icon.classList.add('fa-clock');
message.textContent = 'Wakey wakey!';
} else if (time === lunch){
icon.classList.remove('fa-smile');
icon.classList.add('fa-hotdog');
message.textContent = "I'm hungry."
} else if (time === dinner ) {
icon.classList.remove('fa-smile');
icon.classList.add('fa-utensils');
message.textContent = "Can I have more food?";
} else if (time === bed){
icon.classList.remove('fa-smile');
icon.classList.add('fa-bed');
message.textContent = "YAWN";
} else if (time >= noon ) {
icon.classList.add('fa-smile');
message.textContent = "Good afternoon!"
} else if (time < noon) {
icon.classList.add('fa-smile');
message.innerHtml = "Good morning!";
} else if (time >= evening) {
icon.classList.add('fa-smile');
message.textContent = "Good evening!";
}
showCurrentTime();
};
updateClock();
//Getting the clock to increment once a second
const oneSecond = 1000;
setInterval(updateClock, oneSecond);
const wakeSelect = document.querySelector('#wakeSelect')
wakeSelect.addEventListener('change', function() {
wakeTime = wakeSelect.value;
});
const lunchSelect = document.querySelector('#lunchSelect')
lunchSelect.addEventListener('change', () => {
lunch = lunchSelect.value;
});
const dinnerSelect = document.querySelector('#dinnerSelect')
dinnerSelect.addEventListener('change', () => {
dinner = dinnerSelect.value;
});
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vanilla JS Clock</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://kit.fontawesome.com/35e4240984.js" crossorigin="anonymous"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<h1>What time is it!?</h1>
<span id="clock">Clock goes here</span>
<div class="icon-wrapper">
<i id="food-icon" class="fa-5x fas"></i>
</div>
<div id="message">
<p>Hello!</p>
</div>
<label>Choose wake up time:</label>
<select id="wakeSelect">
<option value="1">1 AM</option>
<option value="2">2 AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8" selected>8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label for="lunchSelect">Choose lunch time</label>
<select id="lunchSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12" selected>12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label>Choose dinner time</label>
<select id="dinnerSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18" selected>6 PM – 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<script src="index.js" async defer></script>
</body>
</html>
问题是您正在尝试使用 === 比较不同类型的变量，其中 比较值 和 数据类型 .因此，当您在 updateClock:
中执行此操作时
if(time === wakeTime)
即使值相同也会失败，因为 time 是一个数字而 wakeTime 是一个字符串。您可以通过两种方式更改代码来解决此问题：
仅比较值 而不是使用 == 的类型：if(time == wakeTime)
或使用Number或parseInt函数将字符串更改为数字，例如if(time === Number(wakeTime))
我已经在下面的 updateClock 函数中更改了它，您可以在这里看到它的工作原理！我还修复了不正确的图标 classes 未被删除（请参阅下面的更新）：
let wakeTime = 7;
let noon = 12;
let lunch = 12;
let evening = 17;
let dinner = 18;
let bed = 21;
//Setting time up
let showCurrentTime = () => {
const clock = document.getElementById('clock');
let currentTime = new Date();
let hours = currentTime.getHours();
let minutes = currentTime.getMinutes();
let seconds = currentTime.getSeconds();
let meridian = "AM";
if (hours >= noon)
{
meridian = "PM";
}
if (hours > noon)
{
hours = hours - 12;
}
// Set Minutes
if (minutes < 10)
{
minutes = "0" + minutes;
}
// Set Seconds
if (seconds < 10)
{
seconds = "0" + seconds;
}
//Putting it all together
let clockTime = `${hours}:${minutes}:${seconds} ${meridian}!`;
clock.innerText = clockTime;
};
//Getting the clock to update on its own so it changes pictures and messages
let updateClock = () => {
let time = new Date().getHours();
let message = document.getElementById('message');
let icon = document.getElementById('food-icon');
if(time == wakeTime){
changeIcon(icon, 'fa-clock');
message.textContent = 'Wakey wakey!';
} else if (time == lunch){
changeIcon(icon, 'fa-hotdog');
message.textContent = "I'm hungry."
} else if (time == dinner ) {
changeIcon(icon, 'fa-utensils');
message.textContent = "Can I have more food?";
} else if (time == bed){
changeIcon(icon, 'fa-bed');
message.textContent = "YAWN";
} else if (time >= noon ) {
changeIcon(icon, 'fa-smile');
message.textContent = "Good afternoon!"
} else if (time < noon) {
changeIcon(icon, 'fa-smile');
message.innerHtml = "Good morning!";
} else if (time >= evening) {
changeIcon(icon, 'fa-smile');
message.textContent = "Good evening!";
}
showCurrentTime();
};
updateClock();
//Getting the clock to increment once a second
const oneSecond = 1000;
setInterval(updateClock, oneSecond);
const wakeSelect = document.querySelector('#wakeSelect')
wakeSelect.addEventListener('change', function() {
wakeTime = wakeSelect.value;
});
const lunchSelect = document.querySelector('#lunchSelect')
lunchSelect.addEventListener('change', () => {
lunch = lunchSelect.value;
});
const dinnerSelect = document.querySelector('#dinnerSelect')
dinnerSelect.addEventListener('change', () => {
dinner = dinnerSelect.value;
});
function changeIcon(iconElement, newIconClass){
// remove all existing icon classes
iconElement.classList.forEach(className => {
// check for classes starting with "fa-" but are not "fa-5x"
if (className.startsWith('fa-') && className!=('fa-5x'))
iconElement.classList.remove(className);
});
// now add the new class
iconElement.classList.add(newIconClass);
}
<script src="https://kit.fontawesome.com/35e4240984.js" crossorigin="anonymous"></script>
<h1>What time is it!?</h1>
<span id="clock">Clock goes here</span>
<div class="icon-wrapper">
<i id="food-icon" class="fa-5x fas"></i>
</div>
<div id="message">
<p>Hello!</p>
</div>
<label>Choose wake up time:</label>
<select id="wakeSelect">
<option value="1">1 AM</option>
<option value="2">2 AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8" selected>8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label for="lunchSelect">Choose lunch time</label>
<select id="lunchSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12" selected>12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label>Choose dinner time</label>
<select id="dinnerSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18" selected>6 PM – 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
注意：您的逻辑删除图标还有其他问题。例如，您只是从 if (time==wakeTime) 中删除了 fa-smile class，因此如果您更改了午餐时间，那么该图标将是其他东西，而您并没有删除它。您可以更改它，以便它删除所有现有的 class 而不是特定的。
更新 - 删除 所有 现有 fa- 图标 classes:
执行此操作最灵活的方法可能是删除所有 class 以 fa- 开头的图标，这样您就不必保留列表。
以下函数查找所有以 fa- 开头的 classes， fa-5x 除外（因为您需要它作为大小），并删除它们。也可以传入新图标 class:
function changeIcon(iconElement, newIconClass){
// remove all existing icon classes
iconElement.classList.forEach(className => {
// check for classes starting with "fa-" but are not "fa-5x"
if (className.startsWith('fa-') && className!=('fa-5x'))
iconElement.classList.remove(className);
});
// now add the new class
iconElement.classList.add(newIconClass);
}
要使用它，您只需要执行以下操作！
if(time == wakeTime){
changeIcon(icon, 'fa-clock');
message.textContent = 'Wakey wakey!';
}
// etc
我对您的代码应用了 2 处更改：
wakeTime = parseInt(wakeSelect.value); 解析为 int，因为您正在与 ===（以及其他值）- 删除class列表中的所有集合class，提前列出所有可能的：
const classes = ['fa-smile', 'fa-clock', 'fa-hotdog', 'fa-utensils', 'fa-bed'];
然后在设置新的之前删除它们 icon.classList.remove(...classes); 你可以在 if/else 块之外调用它。但我会把它留给你:)
let wakeTime = 7;
let noon = 12;
let lunch = 12;
let evening = 17;
let dinner = 18;
let bed = 21;
//Setting time up
let showCurrentTime = () => {
const clock = document.getElementById('clock');
let currentTime = new Date();
let hours = currentTime.getHours();
let minutes = currentTime.getMinutes();
let seconds = currentTime.getSeconds();
let meridian = "AM";
if (hours >= noon)
{
meridian = "PM";
}
if (hours > noon)
{
hours = hours - 12;
}
// Set Minutes
if (minutes < 10)
{
minutes = "0" + minutes;
}
// Set Seconds
if (seconds < 10)
{
seconds = "0" + seconds;
}
//Putting it all together
let clockTime = `${hours}:${minutes}:${seconds} ${meridian}!`;
clock.innerText = clockTime;
};
//Getting the clock to update on its own so it changes pictures and messages
let updateClock = () => {
let time = new Date().getHours();
let message = document.getElementById('message');
let icon = document.getElementById('food-icon');
const classes = ['fa-smile', 'fa-clock', 'fa-hotdog', 'fa-utensils', 'fa-bed'];
if(time === wakeTime){
icon.classList.remove(...classes);
icon.classList.add('fa-clock');
message.textContent = 'Wakey wakey!';
} else if (time === lunch){
icon.classList.remove(...classes);
icon.classList.add('fa-hotdog');
message.textContent = "I'm hungry."
} else if (time === dinner ) {
icon.classList.remove(...classes);
icon.classList.add('fa-utensils');
message.textContent = "Can I have more food?";
} else if (time === bed){
icon.classList.remove(...classes);
icon.classList.add('fa-bed');
message.textContent = "YAWN";
} else if (time >= noon ) {
icon.classList.remove(...classes);
icon.classList.add('fa-smile');
message.textContent = "Good afternoon!"
} else if (time < noon) {
icon.classList.remove(...classes);
icon.classList.add('fa-smile');
message.innerHtml = "Good morning!";
} else if (time >= evening) {
icon.classList.remove(...classes);
icon.classList.add('fa-smile');
message.textContent = "Good evening!";
}
showCurrentTime();
};
updateClock();
//Getting the clock to increment once a second
const oneSecond = 1000;
setInterval(updateClock, oneSecond);
const wakeSelect = document.querySelector('#wakeSelect')
wakeSelect.addEventListener('change', function() {
wakeTime = parseInt(wakeSelect.value);
});
const lunchSelect = document.querySelector('#lunchSelect')
lunchSelect.addEventListener('change', () => {
lunch = parseInt(lunchSelect.value);
});
const dinnerSelect = document.querySelector('#dinnerSelect')
dinnerSelect.addEventListener('change', () => {
dinner = parseInt(dinnerSelect.value);
});
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vanilla JS Clock</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://kit.fontawesome.com/35e4240984.js" crossorigin="anonymous"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<h1>What time is it!?</h1>
<span id="clock">Clock goes here</span>
<div class="icon-wrapper">
<i id="food-icon" class="fa-5x fas"></i>
</div>
<div id="message">
<p>Hello!</p>
</div>
<label>Choose wake up time:</label>
<select id="wakeSelect">
<option value="1">1 AM</option>
<option value="2">2 AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8" selected>8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label for="lunchSelect">Choose lunch time</label>
<select id="lunchSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12" selected>12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label>Choose dinner time</label>
<select id="dinnerSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18" selected>6 PM – 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<script src="index.js" async defer></script>
</body>
</html>
我正在尝试做我自己的看法：https://codepen.io/codifiedconcepts/pen/bwgxRq
我做了一些调整，但是当我在下拉菜单中更改时间时，图标没有按预期更改。我通过手动更改时间和图标进行了测试，并且通过添加警告框测试了事件侦听器 - 一切正常。
但是当我自己去改变下拉菜单时，图标并没有改变。我似乎无法让它工作。
let wakeTime = 7;
let noon = 12;
let lunch = 12;
let evening = 17;
let dinner = 18;
let bed = 21;
//Setting time up
let showCurrentTime = () => {
const clock = document.getElementById('clock');
let currentTime = new Date();
let hours = currentTime.getHours();
let minutes = currentTime.getMinutes();
let seconds = currentTime.getSeconds();
let meridian = "AM";
if (hours >= noon)
{
meridian = "PM";
}
if (hours > noon)
{
hours = hours - 12;
}
// Set Minutes
if (minutes < 10)
{
minutes = "0" + minutes;
}
// Set Seconds
if (seconds < 10)
{
seconds = "0" + seconds;
}
//Putting it all together
let clockTime = `${hours}:${minutes}:${seconds} ${meridian}!`;
clock.innerText = clockTime;
};
//Getting the clock to update on its own so it changes pictures and messages
let updateClock = () => {
let time = new Date().getHours();
let message = document.getElementById('message');
let icon = document.getElementById('food-icon');
if(time === wakeTime){
icon.classList.remove('fa-smile');
icon.classList.add('fa-clock');
message.textContent = 'Wakey wakey!';
} else if (time === lunch){
icon.classList.remove('fa-smile');
icon.classList.add('fa-hotdog');
message.textContent = "I'm hungry."
} else if (time === dinner ) {
icon.classList.remove('fa-smile');
icon.classList.add('fa-utensils');
message.textContent = "Can I have more food?";
} else if (time === bed){
icon.classList.remove('fa-smile');
icon.classList.add('fa-bed');
message.textContent = "YAWN";
} else if (time >= noon ) {
icon.classList.add('fa-smile');
message.textContent = "Good afternoon!"
} else if (time < noon) {
icon.classList.add('fa-smile');
message.innerHtml = "Good morning!";
} else if (time >= evening) {
icon.classList.add('fa-smile');
message.textContent = "Good evening!";
}
showCurrentTime();
};
updateClock();
//Getting the clock to increment once a second
const oneSecond = 1000;
setInterval(updateClock, oneSecond);
const wakeSelect = document.querySelector('#wakeSelect')
wakeSelect.addEventListener('change', function() {
wakeTime = wakeSelect.value;
});
const lunchSelect = document.querySelector('#lunchSelect')
lunchSelect.addEventListener('change', () => {
lunch = lunchSelect.value;
});
const dinnerSelect = document.querySelector('#dinnerSelect')
dinnerSelect.addEventListener('change', () => {
dinner = dinnerSelect.value;
});
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vanilla JS Clock</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://kit.fontawesome.com/35e4240984.js" crossorigin="anonymous"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<h1>What time is it!?</h1>
<span id="clock">Clock goes here</span>
<div class="icon-wrapper">
<i id="food-icon" class="fa-5x fas"></i>
</div>
<div id="message">
<p>Hello!</p>
</div>
<label>Choose wake up time:</label>
<select id="wakeSelect">
<option value="1">1 AM</option>
<option value="2">2 AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8" selected>8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label for="lunchSelect">Choose lunch time</label>
<select id="lunchSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12" selected>12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label>Choose dinner time</label>
<select id="dinnerSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18" selected>6 PM – 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<script src="index.js" async defer></script>
</body>
</html>
问题是您正在尝试使用 === 比较不同类型的变量，其中 比较值 和 数据类型 .因此，当您在 updateClock:
if(time === wakeTime)
即使值相同也会失败，因为 time 是一个数字而 wakeTime 是一个字符串。您可以通过两种方式更改代码来解决此问题：
仅比较值 而不是使用
==的类型：if(time == wakeTime)或使用
Number或parseInt函数将字符串更改为数字，例如if(time === Number(wakeTime))
我已经在下面的 updateClock 函数中更改了它，您可以在这里看到它的工作原理！我还修复了不正确的图标 classes 未被删除（请参阅下面的更新）：
let wakeTime = 7;
let noon = 12;
let lunch = 12;
let evening = 17;
let dinner = 18;
let bed = 21;
//Setting time up
let showCurrentTime = () => {
const clock = document.getElementById('clock');
let currentTime = new Date();
let hours = currentTime.getHours();
let minutes = currentTime.getMinutes();
let seconds = currentTime.getSeconds();
let meridian = "AM";
if (hours >= noon)
{
meridian = "PM";
}
if (hours > noon)
{
hours = hours - 12;
}
// Set Minutes
if (minutes < 10)
{
minutes = "0" + minutes;
}
// Set Seconds
if (seconds < 10)
{
seconds = "0" + seconds;
}
//Putting it all together
let clockTime = `${hours}:${minutes}:${seconds} ${meridian}!`;
clock.innerText = clockTime;
};
//Getting the clock to update on its own so it changes pictures and messages
let updateClock = () => {
let time = new Date().getHours();
let message = document.getElementById('message');
let icon = document.getElementById('food-icon');
if(time == wakeTime){
changeIcon(icon, 'fa-clock');
message.textContent = 'Wakey wakey!';
} else if (time == lunch){
changeIcon(icon, 'fa-hotdog');
message.textContent = "I'm hungry."
} else if (time == dinner ) {
changeIcon(icon, 'fa-utensils');
message.textContent = "Can I have more food?";
} else if (time == bed){
changeIcon(icon, 'fa-bed');
message.textContent = "YAWN";
} else if (time >= noon ) {
changeIcon(icon, 'fa-smile');
message.textContent = "Good afternoon!"
} else if (time < noon) {
changeIcon(icon, 'fa-smile');
message.innerHtml = "Good morning!";
} else if (time >= evening) {
changeIcon(icon, 'fa-smile');
message.textContent = "Good evening!";
}
showCurrentTime();
};
updateClock();
//Getting the clock to increment once a second
const oneSecond = 1000;
setInterval(updateClock, oneSecond);
const wakeSelect = document.querySelector('#wakeSelect')
wakeSelect.addEventListener('change', function() {
wakeTime = wakeSelect.value;
});
const lunchSelect = document.querySelector('#lunchSelect')
lunchSelect.addEventListener('change', () => {
lunch = lunchSelect.value;
});
const dinnerSelect = document.querySelector('#dinnerSelect')
dinnerSelect.addEventListener('change', () => {
dinner = dinnerSelect.value;
});
function changeIcon(iconElement, newIconClass){
// remove all existing icon classes
iconElement.classList.forEach(className => {
// check for classes starting with "fa-" but are not "fa-5x"
if (className.startsWith('fa-') && className!=('fa-5x'))
iconElement.classList.remove(className);
});
// now add the new class
iconElement.classList.add(newIconClass);
}
<script src="https://kit.fontawesome.com/35e4240984.js" crossorigin="anonymous"></script>
<h1>What time is it!?</h1>
<span id="clock">Clock goes here</span>
<div class="icon-wrapper">
<i id="food-icon" class="fa-5x fas"></i>
</div>
<div id="message">
<p>Hello!</p>
</div>
<label>Choose wake up time:</label>
<select id="wakeSelect">
<option value="1">1 AM</option>
<option value="2">2 AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8" selected>8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label for="lunchSelect">Choose lunch time</label>
<select id="lunchSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12" selected>12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label>Choose dinner time</label>
<select id="dinnerSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18" selected>6 PM – 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
注意：您的逻辑删除图标还有其他问题。例如，您只是从 if (time==wakeTime) 中删除了 fa-smile class，因此如果您更改了午餐时间，那么该图标将是其他东西，而您并没有删除它。您可以更改它，以便它删除所有现有的 class 而不是特定的。
更新 - 删除 所有 现有 fa- 图标 classes:
执行此操作最灵活的方法可能是删除所有 class 以 fa- 开头的图标，这样您就不必保留列表。
以下函数查找所有以 fa- 开头的 classes， fa-5x 除外（因为您需要它作为大小），并删除它们。也可以传入新图标 class:
function changeIcon(iconElement, newIconClass){
// remove all existing icon classes
iconElement.classList.forEach(className => {
// check for classes starting with "fa-" but are not "fa-5x"
if (className.startsWith('fa-') && className!=('fa-5x'))
iconElement.classList.remove(className);
});
// now add the new class
iconElement.classList.add(newIconClass);
}
要使用它，您只需要执行以下操作！
if(time == wakeTime){
changeIcon(icon, 'fa-clock');
message.textContent = 'Wakey wakey!';
}
// etc
我对您的代码应用了 2 处更改：
wakeTime = parseInt(wakeSelect.value);解析为 int，因为您正在与===（以及其他值） 进行比较
- 删除class列表中的所有集合class，提前列出所有可能的：
const classes = ['fa-smile', 'fa-clock', 'fa-hotdog', 'fa-utensils', 'fa-bed'];然后在设置新的之前删除它们icon.classList.remove(...classes);你可以在 if/else 块之外调用它。但我会把它留给你:)
let wakeTime = 7;
let noon = 12;
let lunch = 12;
let evening = 17;
let dinner = 18;
let bed = 21;
//Setting time up
let showCurrentTime = () => {
const clock = document.getElementById('clock');
let currentTime = new Date();
let hours = currentTime.getHours();
let minutes = currentTime.getMinutes();
let seconds = currentTime.getSeconds();
let meridian = "AM";
if (hours >= noon)
{
meridian = "PM";
}
if (hours > noon)
{
hours = hours - 12;
}
// Set Minutes
if (minutes < 10)
{
minutes = "0" + minutes;
}
// Set Seconds
if (seconds < 10)
{
seconds = "0" + seconds;
}
//Putting it all together
let clockTime = `${hours}:${minutes}:${seconds} ${meridian}!`;
clock.innerText = clockTime;
};
//Getting the clock to update on its own so it changes pictures and messages
let updateClock = () => {
let time = new Date().getHours();
let message = document.getElementById('message');
let icon = document.getElementById('food-icon');
const classes = ['fa-smile', 'fa-clock', 'fa-hotdog', 'fa-utensils', 'fa-bed'];
if(time === wakeTime){
icon.classList.remove(...classes);
icon.classList.add('fa-clock');
message.textContent = 'Wakey wakey!';
} else if (time === lunch){
icon.classList.remove(...classes);
icon.classList.add('fa-hotdog');
message.textContent = "I'm hungry."
} else if (time === dinner ) {
icon.classList.remove(...classes);
icon.classList.add('fa-utensils');
message.textContent = "Can I have more food?";
} else if (time === bed){
icon.classList.remove(...classes);
icon.classList.add('fa-bed');
message.textContent = "YAWN";
} else if (time >= noon ) {
icon.classList.remove(...classes);
icon.classList.add('fa-smile');
message.textContent = "Good afternoon!"
} else if (time < noon) {
icon.classList.remove(...classes);
icon.classList.add('fa-smile');
message.innerHtml = "Good morning!";
} else if (time >= evening) {
icon.classList.remove(...classes);
icon.classList.add('fa-smile');
message.textContent = "Good evening!";
}
showCurrentTime();
};
updateClock();
//Getting the clock to increment once a second
const oneSecond = 1000;
setInterval(updateClock, oneSecond);
const wakeSelect = document.querySelector('#wakeSelect')
wakeSelect.addEventListener('change', function() {
wakeTime = parseInt(wakeSelect.value);
});
const lunchSelect = document.querySelector('#lunchSelect')
lunchSelect.addEventListener('change', () => {
lunch = parseInt(lunchSelect.value);
});
const dinnerSelect = document.querySelector('#dinnerSelect')
dinnerSelect.addEventListener('change', () => {
dinner = parseInt(dinnerSelect.value);
});
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vanilla JS Clock</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://kit.fontawesome.com/35e4240984.js" crossorigin="anonymous"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<h1>What time is it!?</h1>
<span id="clock">Clock goes here</span>
<div class="icon-wrapper">
<i id="food-icon" class="fa-5x fas"></i>
</div>
<div id="message">
<p>Hello!</p>
</div>
<label>Choose wake up time:</label>
<select id="wakeSelect">
<option value="1">1 AM</option>
<option value="2">2 AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8" selected>8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label for="lunchSelect">Choose lunch time</label>
<select id="lunchSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12" selected>12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label>Choose dinner time</label>
<select id="dinnerSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18" selected>6 PM – 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<script src="index.js" async defer></script>
</body>
</html>