带 setInterval 的彩色时钟 - 现代 JavaScript 教程

创建一个像这里一样的彩色时钟

使用 HTML/CSS 进行样式设置，JavaScript 仅更新元素中的时间。

首先，让我们制作 HTML/CSS。

时间的每个组件在它自己的 <span> 中看起来会很棒

          <div id="clock">
  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
</div>
        

我们还需要 CSS 来为它们着色。

update 函数将刷新时钟，由 setInterval 每秒调用一次

          function update() {
  let clock = document.getElementById('clock');
  let date = new Date(); // (*)
  let hours = date.getHours();
  if (hours < 10) hours = '0' + hours;
  clock.children[0].innerHTML = hours;

  let minutes = date.getMinutes();
  if (minutes < 10) minutes = '0' + minutes;
  clock.children[1].innerHTML = minutes;

  let seconds = date.getSeconds();
  if (seconds < 10) seconds = '0' + seconds;
  clock.children[2].innerHTML = seconds;
}
        

在代码行 (*) 中，我们每次都会检查当前日期。调用 setInterval 并不可靠：它们可能会延迟执行。

时钟管理函数

          let timerId;

function clockStart() { // run the clock
  if (!timerId) { // only set a new interval if the clock is not running
    timerId = setInterval(update, 1000);
  }
  update(); // (*)
}

function clockStop() {
  clearInterval(timerId);
  timerId = null; // (**)
}
        

请注意，update() 的调用不仅在 clockStart() 中被调度，而且在代码行 (*) 中立即执行。否则，访问者将不得不等到 setInterval 第一次执行。并且时钟在那之前将是空的。

同样重要的是，只有在时钟未运行时，才在 clockStart() 中设置新的间隔。否则，多次点击开始按钮将设置多个并发间隔。更糟糕的是 - 我们只会保留最后一个间隔的 timerID，而丢失对所有其他间隔的引用。然后我们将永远无法停止时钟！请注意，我们需要在代码行 (**) 中清除 timerID，以便在时钟停止时可以再次通过运行 clockStart() 来启动它。

在沙盒中打开解决方案。