使用 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() 再次啟動時鐘。