为什么element.innerHTML =带有日期信息的字符串不起作用？

Question

我在setInterval()遇到了这个问题：

var h1 = document.getElementById("demo");
function updateTime(d) {
h1.innerHTML = "numero del mese: " + d.getDate() +
"<br>numero della settimana: " + d.getDay() +
"<br>anno: " + d.getFullYear() +
"<br>mese: " + d.getMonth() +
"<br>ore: " + d.getHours() +
"<br>minuti: " + d.getMinutes() +
"<br>secondi: " + d.getSeconds();
}
setInterval(updateTime.bind(null, new Date()), 1000);

所有这些都可以正常工作，但它只工作一次，然后什么都没有。 为什么？

Answer 1

new Date()创建一个 Date 对象，表示创建对象的时间

你调用它一次，然后在显示该时间(不变(的间隔中使用它每秒。

如果要获取当前时间，则需要在间隔上调用的函数中创建新的 Date 对象。

例如：

setInterval(function () { updateTime(new Date()); }, 1000);

Answer 2

新的 Date 对象创建一次，并且您在每次函数调用中都使用相同的对象。因此，日期不会在每次通话时更改。

您需要在函数内创建新的 Date 对象，以便在每次调用函数时创建它，从而更新时间。

检查下面的代码片段：

var h1 = document.getElementById("demo");
function updateTime() {
var d = new Date();

h1.innerHTML = "numero del mese: " + d.getDate() +
"<br>numero della settimana: " + d.getDay() +
"<br>anno: " + d.getFullYear() +
"<br>mese: " + d.getMonth() +
"<br>ore: " + d.getHours() +
"<br>minuti: " + d.getMinutes() +
"<br>secondi: " + d.getSeconds();
}
setInterval(updateTime, 1000);

<div id="demo"></div>

Answer 3

那是因为你使用.bind(null, new Date()).因此，对于每个将来的调用，它与最初创建的日期相同。我建议每隔一段时间就给new Date()打电话，以获取当前时间。见下文。

var h1 = document.getElementById("demo");
function updateTime() {
let d = new Date();

h1.innerHTML = "numero del mese: " + d.getDate() +
"<br>numero della settimana: " + d.getDay() +
"<br>anno: " + d.getFullYear() +
"<br>mese: " + d.getMonth() +
"<br>ore: " + d.getHours() +
"<br>minuti: " + d.getMinutes() +
"<br>secondi: " + d.getSeconds();
}
setInterval(updateTime, 1000);

<h1 id="demo"></h1>