為什么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>