javascript - setInterval 不更新 html 元素

Question

基本上，我试图让我的代码每秒更新一个元素的值。问题是我当前的代码只在第一次更新它。控制台也没有错误。

奇怪的是 console.log() 一直在运行，但是元素没有更新，时间变量也没有更新

var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var date = today.getFullYear() + '/' + String(today.getMonth() + 1).padStart(2, '0') + '/' + String(today.getDate()).padStart(2, '0');

setInterval(function() {
  time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var elTime = document.getElementById("time");
  elTime.textContent = time;
  console.log(time);
}, 1000);

Answer 1

试试这个方法，每次执行setInterval时也需要更新变量。

(function() {
  setInterval(function() {
    var today = new Date();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var date = today.getFullYear() + '/' + String(today.getMonth() + 1).padStart(2, '0') + '/' + String(today.getDate()).padStart(2, '0');
    time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var elTime = document.getElementById("time");
    elTime.textContent = time;
    console.log(time);
  }, 1000);
})()

<div id="time"></div>