带 setInterval 的彩色时钟
重要性：4
首先，让我们制作 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() 来启动它。