javascript - 使用 setInterval 更新innerHTML

Question

我正在尝试刷新在innerHTML 中设置的时间。我正在使用 setInterval，但 innerHTML 仍然是静态的。只有当我手动刷新时才会显示当前时间...... fiddle :https://jsfiddle.net/eu9qrawc/

const d = new Date();
const time_date = document.querySelector('.time_date');
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'];
const day = days[d.getDay()];
const seconds = d.getSeconds();


setInterval(() => {
  function showtime() {
    time_date.innerHTML = day + ' ' + seconds
  }
  showtime();
}, 1000);

<div class="time_date"></div>

Answer 1

您忘记刷新变量，因此它们将始终包含相同的值。试试这个:

const time_date = document.querySelector('.time_date');
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'];


setInterval(() => {
  const d = new Date();
  const day = days[d.getDay()];
  const seconds = d.getSeconds();
  function showtime() {
    time_date.innerHTML = day + ' ' + seconds
  }
  showtime();
}, 1000);

<div class="time_date"></div>

现在，变量是间隔回调的本地变量，并在每次调用函数时(即每秒)单独创建。

如果您还要在其他地方调用 showtime 函数，请考虑将声明移入其中。

const time_date = document.querySelector('.time_date');
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'];


setInterval(() => {
  function showtime() {
    const d = new Date();
    const day = days[d.getDay()];
    const seconds = d.getSeconds();
    time_date.innerHTML = day + ' ' + seconds
  }
  showtime();
}, 1000);

<div class="time_date"></div>