setTimeout() 运行函数但日期未更新
[英]setTimeout() runs function but date is not updated
问题描述
I couldn't find any fix in all the other threads about setTimeout() so here goes:
我在有关 setTimeout() 的所有其他线程中找不到任何修复，所以这里是：
I made a digital clock and if you refresh the page it shows the correct time.我做了一个数字时钟，如果你刷新页面，它会显示正确的时间。 But the setTimeout doesn't refresh the page every 500ms?但是 setTimeout 不会每 500 毫秒刷新一次页面？ Teacher looked at my code and couldn't even find out why?老师看了我的代码，竟然不知道为什么？ All the variables are update in de renew function and the clock works apart from it not running.所有变量都在更新功能中更新，并且时钟在不运行的情况下工作。 So I know the only error is where I call the setTimeout function.所以我知道唯一的错误是我调用 setTimeout 函数的地方。
const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; let date = new Date(); function formatNumber(number) { return number < 10 ? "0" + number : number; } function renew() { for (let i = 0; i < weekDays.length; i++) { if (date.getDay() === i) { document.getElementById("day").innerText = weekDays[i]; } } document.getElementById("hours").innerText = formatNumber(date.getHours()); document.getElementById("mins").innerText = formatNumber(date.getMinutes()); document.getElementById("secs").innerText = formatNumber(date.getSeconds()); if (date.getHours() > 0 && date.getHours() < 12) { document.getElementById("period").innerText = "AM"; } else { document.getElementById("period").innerText = "PM"; } window.setTimeout(renew, 500); } renew();
<html lang="en"> <head> <meta charset="UTF-8"> <title>Digital Clock</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="clock"> <!-- Time units wrapper --> <span class="wrap-time"> <!-- Time unit - Day --> <span class="time-unit"> <span id=day class="large day">Mon</span> <span class="small">DAY</span> </span> <!-- Time unit - Hours --> <span class="time-unit"> <span id=hours class="large hours">00</span> <span class="small">HOURS</span> </span> <span class="separator">:</span> <!-- Time unit - Minutes --> <span class="time-unit"> <span id=mins class="large minutes">00</span> <span class="small">MINUTES</span> </span> <span class="separator">:</span> <!-- Time unit - Seconds --> <span class="time-unit"> <span id="secs" class="large seconds">00</span> <span class="small">SECONDS</span> </span> <!-- Time unit - Period --> <span class="time-unit"> <span id=period class="large period">AM</span> <span class="small">PERIOD</span> </span> </span> </div> </body> </html>
1 个解决方案
解决方案1
0 2019-12-03 12:11:37
your renew function should first update the date and then use it further.您的更新功能应首先更新日期，然后进一步使用它。
function renew() {
date=new Date();
for (let i = 0; i < weekDays.length; i++) {
if (date.getDay() === i) {
document.getElementById("day").innerText = weekDays[i];
}
}
document.getElementById("hours").innerText = formatNumber(date.getHours());
document.getElementById("mins").innerText = formatNumber(date.getMinutes());
document.getElementById("secs").innerText = formatNumber(date.getSeconds());
if (date.getHours() > 0 && date.getHours() < 12) {
document.getElementById("period").innerText = "AM";
} else {
document.getElementById("period").innerText = "PM";
}
window.setTimeout(renew, 500);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.