setTimeout 在此时钟项目中不起作用

Question

由于某种原因，超时不起作用，时钟编号与最初开始时相同。我试了setInterval()但也没有用。

下面的代码，或在此处查看：代码笔

// Variables
var hourN = document.getElementById("hoursD");
var minuteN = document.getElementById("minutesD");
var secondN = document.getElementById("secondsD");
var hour, minute, second = 0;
var date = new Date();
// Functions
function refresh() {

hour = date.getHours();
minute = date.getMinutes();
second = date.getSeconds();
hour > 12 ? hour = hour - 12 : hour;

hourN.innerText = hour;
minuteN.innerText = minute;
secondN.innerText = second;

var t = setTimeout(function(){ refresh(); }, 1000);

}
refresh();

<h1 align="center">
<span id="hoursD"></span> : <span id="minutesD"></span> : <span id="secondsD"></span>
</h1>

Answer 1

date仍然保存初始值。 您应该在刷新中更新它。

// Variables
var hourN = document.getElementById("hoursD");
var minuteN = document.getElementById("minutesD");
var secondN = document.getElementById("secondsD");
var hour, minute, second = 0;
var date = new Date();
// Functions
function refresh() {

date = new Date();
hour = date.getHours();
minute = date.getMinutes();
second = date.getSeconds();
hour > 12 ? hour = hour - 12 : hour;

hourN.innerText = hour;
minuteN.innerText = minute;
secondN.innerText = second;

var t = setTimeout(function(){ refresh(); }, 1000);

}
refresh();

顺便一提。。setInterval此功能会更好。

Answer 2

你必须在这里使用setTimeout。此外，您的 css 从视口中删除了 h1。此外，您还必须在函数refresh内更新date值。

// Variables
var hourN = document.getElementById("hoursD");
var minuteN = document.getElementById("minutesD");
var secondN = document.getElementById("secondsD");
var hour, minute, second = 0;

// Functions
function refresh() {
var date = new Date();
hour = date.getHours();
minute = date.getMinutes();
second = date.getSeconds();
hour > 12 ? hour = hour - 12 : hour;
hourN.innerText = hour;
minuteN.innerText = minute;
secondN.innerText = second;

}
setInterval(function(){ refresh(); }, 1000);

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {

padding-bottom: calc(50% - 200px);
}
h1 > span {
color: black;
}
h1 {
color: #2979ff;
}

Answer 3

将date变量移动到refresh()函数内，以便它每秒获取当前日期。否则，它只会返回用户首次加载脚本时的日期。

此外，我会将计时器移到refresh()函数之外并使用setInterval来调用它。

以下是更新的代码：

var hourN = document.getElementById("hoursD");
var minuteN = document.getElementById("minutesD");
var secondN = document.getElementById("secondsD");
var hour, minute, second = 0;

// Functions
function refresh() {
var date = new Date();
hour = date.getHours();
minute = date.getMinutes();
second = date.getSeconds();
hour > 12 ? hour = hour - 12 : hour;
hourN.innerText = hour;
minuteN.innerText = minute;
secondN.innerText = second;
}
refresh();
setInterval(function(){ refresh(); }, 1000)