JavaScriptでカウントダウンタイマーを作成する方法【setIntervalの使い方を解説】

JavaScriptでは、setIntervalメソッドを使うことで、簡単にカウントダウンタイマーを実装できます。setInterval()は、指定した時間間隔ごとに関数やコードスニペットを繰り返し実行するためのメソッドです。

カウントダウンの仕組み

カウントダウンを作成するには、「現在時刻」と「目標となる終了時刻」の差分を計算し、その結果を一定間隔で更新し続ける必要があります。具体的な流れは以下のとおりです。

1. Dateオブジェクトで終了日時をミリ秒単位で取得する
2. setInterval()で1秒ごとに現在時刻との差分を計算する
3. 差分から「日・時間・分・秒」を算出して表示する
4. 差分が0未満になったらclearInterval()でタイマーを停止する

サンプルコード

let countDownDate = new Date("Jul 21, 2020 00:00:00").getTime();
let x = setInterval(() => {
    let now = new Date().getTime();
    let distance = countDownDate - now;
    // 日・時間・分・秒の計算
    let days = Math.floor(distance / (1000 * 60 * 60 * 24));
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);
    console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s");
    // カウントダウン終了時の処理
    if (distance < 0) {
        clearInterval(x);
        console.log("completed")
    }
}, 1000);

実行結果

このコードを実行すると、コンソールに1秒ごとに残り時間が出力されます。

310d 0h 6m 46s
310d 0h 6m 45s
310d 0h 6m 44s
310d 0h 6m 43s
310d 0h 6m 42s
310d 0h 6m 41s
310d 0h 6m 40s
310d 0h 6m 39s
310d 0h 6m 38s
310d 0h 6m 37s
310d 0h 6m 36s
310d 0h 6m 35s
310d 0h 6m 34s
310d 0h 6m 33s

コードのポイント解説

• 終了時刻の取得： new Date("Jul 21, 2020 00:00:00").getTime()により、指定した日時を1970年1月1日からの経過ミリ秒数（Unixタイムスタンプ）に変換しています。
• 差分の計算： countDownDate - nowで残り時間をミリ秒で求めます。
• 各単位への変換： Math.floor()で小数点以下を切り捨てながら、剰余演算子%を組み合わせて日・時間・分・秒をそれぞれ算出します。
• タイマーの停止： 残り時間が負になったらclearInterval(x)を呼び出し、無駄な処理が続かないようにします。

この仕組みを応用すれば、セール開始までのカウントダウンやイベント告知ページなど、さまざまな場面で活用できるタイマーを作成できます。表示部分をconsole.logではなくDOM操作（例：document.getElementById("timer").innerHTML = ...）に置き換えれば、Webページ上にリアルタイムのカウントダウンを表示することも可能です。