JavaScript のカウントダウンタイマー

タイマーの HTML タグを設定します

上記のコードでは、<h1> タグがタイマー表示を保持しています。このコードを Web ページの HTML で使用します。実行時に要素のテキストを動的に変更するには、JavaScript で count-down-timer id を使用して要素にアクセスするため、id="count-down-timer"が必要です。

<h1 class="text-center" id="count-down-timer"></h1>

タイマー値を設定します

タグを配置したら、次のステップはカウント時間の値を設定することです。通常、Web ページは、コードに組み込まれたハードコードされた時間を使用しますが、これはカスタマイズできません。タイマーは、window.onload メソッドの time_minutes および time_seconds で設定できます。たとえば、タイマーを 1 分半に設定する場合は、次のようにコードを設定します。

let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

3 分間に設定する場合は、time_minutes = 3 を設定し、time_seconds = 0 のままにします。これで、コードを実行するか HTML をリロードすると、更新された出力を取得できます。

実行は window.onload 関数から始まります。それはあなたが設定したタイマー値を取り、秒単位で合計時間を計算します。

let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

let duration = time_minutes * 60 + time_seconds;

document.querySelector('#count-down-timer') は、要素の HTML ノードを取得します。このノードは、タイマー値を更新するために使用されます。

element = document.querySelector('#count-down-timer');

要素が使用可能になると、設定した値で初期化されます。たとえば、コードでは 1 分 30 秒です。パッド形式で設定されます。

function paddedFormat(num) {
  return num < 10 ? '0' + num : num;
}

console.log(paddedFormat(3));
console.log(paddedFormat(12));

出力：

03
12

paddedFormat(num) 関数は、埋め込み番号を返します。分と秒の場合、1 桁の値には、接頭辞 0 が付けられます。たとえば、2 分と 5 秒には、それぞれ 02 と 05 が埋め込まれます。

element.textContent =
    `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;

次に、startCountDown(--duration, element) 関数を呼び出して、duration を秒単位で渡し、display 要素の HTML ノードを渡します。値 01:30 を表示しました。したがって、01:29 から開始するタイマーが必要です。これが、期間 duration のデクリメント単項演算子を使用する理由です。

startCountDown(--duration, element);

startCountDown(duration, element) はタイマーの心臓部です。ここでは、JavaScript の setInterval(function(){}, 1000) 関数を使用して、clearInterval(countInterval) を使用してタイマーがクリアまたは強制終了されるまで、毎秒（1000 ミリ秒）後にタイマーを実行します。

function startCountDown(duration, element) {
  let secondsRemaining = duration;
  let min = 0;
  let sec = 0;

  let countInterval = setInterval(function() {
    min = parseInt(secondsRemaining / 60);
    sec = parseInt(secondsRemaining % 60);

    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

    secondsRemaining = secondsRemaining - 1;
    if (secondsRemaining < 0) {
      clearInterval(countInterval)
    };
  }, 1000);
}

setinterval() 関数内で、表示する分と秒が計算されます。分は、remainingSeconds 値を 60 で割って分値を求め、その整数部分をとることによって計算されます。

let secondsRemaining = 89;
let min = parseInt(secondsRemaining / 60);
let sec = parseInt(secondsRemaining % 60);

console.log(secondsRemaining + 'seconds');
console.log(min);
console.log(sec);

出力：

89  // Equivalent to 1 min and 29 seconds
1
29

次に、HTML ノード要素の textContent 属性を使用してテキストを設定することにより、Web ページに対して計算された分と秒を表示します。

element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

次に、secondsRemaining の値が減少し、タイマー機能が setInterval() メソッドを使用して毎秒実行されます。

最後に、secondsRemaining 値が 0 になると、clearInterval(countInterval) がトリガーされてタイマーが停止します。また、タイマーが再起動されたり、マイナス値になったりしないようにします。