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関数は時計を更新し、1秒ごとに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()を実行することでもう一度起動できるようにする必要があります。