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

  1. JavaScript のカウントダウンタイマーのサンプルコード
  2. JavaScript でのカウントダウンタイマーコードの説明

この記事では、JavaScript でカウントダウンタイマーを作成する簡単な方法を紹介します。

以下は、1 分半のタイマーのコードです。

<h1 class="text-center" id="count-down-timer"></h1>
function paddedFormat(num) {
    return num < 10 ? "0" + num : num; 
}

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);
}

window.onload = function () {
    let time_minutes = 1; // Value in minutes
    let time_seconds = 30; // Value in seconds

    let duration = time_minutes * 60 + time_seconds;

    element = document.querySelector('#count-down-timer');
    element.textContent = `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;

    startCountDown(--duration, element);
};

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 をリロードすると、更新された出力を取得できます。

JavaScript でのカウントダウンタイマーコードの説明

  • 実行は 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) がトリガーされてタイマーが停止します。また、タイマーが再起動されたり、マイナス値になったりしないようにします。