Javascriptで複数のカウントダウンタイマーを実装【コピペでOK】

カウントダウンタイマーを同一ページ内で複数動かしたい時があると思います。
例えばですが、単発募集アルバイトの締め切り時間までのカウントダウンなど。

Javascriptで複数のカウントダウンタイマーを実装する方法について記します。

カウントダウンを一つだけ実装する場合はこちらの記事が参考になるかと思います。
Javascriptでカウントダウンタイマーを実装【コピペでOK】

Contents

実装イメージ
HTML
Javascript

実装イメージ

下記のような複数のカウントダウンタイマーをさくっと実装します。
※ここでは秒数を統一していますが、もちろん秒数がバラバラでも問題なく動きます。

2023年の終わりまで

0年 0日 0時間 0分 0秒

シンギュラリティ（2045年）まで

0年 0日 0時間 0分 0秒

21世紀の終わりまで

0年 0日 0時間 0分 0秒

HTML

カウントダウンを3つ用意しました。data属性にターゲットとなる日時を持たせておきます。

<div class="countdown" data-target-time="2023/12/31 23:59:59">
    <span class="countdown-year">0</span>年
    <span class="countdown-day">0</span>日
    <span class="countdown-hour">0</span>時間
    <span class="countdown-min">0</span>分
    <span class="countdown-sec">0</span>秒
</div>

<div class="countdown" data-target-time="2044/12/31 23:59:59">
    <span class="countdown-year">0</span>年
    <span class="countdown-day">0</span>日
    <span class="countdown-hour">0</span>時間
    <span class="countdown-min">0</span>分
    <span class="countdown-sec">0</span>秒
</div>

<div class="countdown" data-target-time="2099/12/31 23:59:59">
    <span class="countdown-year">0</span>年
    <span class="countdown-day">0</span>日
    <span class="countdown-hour">0</span>時間
    <span class="countdown-min">0</span>分
    <span class="countdown-sec">0</span>秒
</div>

Javascript

2行目のforEachで1秒ごとに各タイマーに対して処理を行うようにしています。4行目で先ほどHTMLでdata属性に設定した日時を取得してターゲット日時に設定しています。あとは計算をして日時を上書きするという作りになっています。

let countdown = setInterval(function(){
    document.querySelectorAll('.countdown').forEach(function (elem) {
        const now = new Date()  //今の日時
        const targetTime = new Date(elem.getAttribute("data-target-time"))  //ターゲット日時を取得
        const remainTime = targetTime - now  //差分を取る（ミリ秒で返ってくる

        // 指定の日時を過ぎていたらスキップ
        if(remainTime < 0) return true

        // //差分の日・時・分・秒を取得
        const difYear = Math.floor(remainTime / 1000 / 60 / 60 / 24 / 365) 
        const difDay = Math.floor(remainTime / 1000 / 60 / 60 / 24) % 365
        const difHour = Math.floor(remainTime / 1000 / 60 / 60 ) % 24
        const difMin = Math.floor(remainTime / 1000 / 60) % 60
        const difSec = Math.floor(remainTime / 1000) % 60

        // //残りの日時を上書き
        elem.querySelectorAll('.countdown-year')[0].textContent = difYear
        elem.querySelectorAll('.countdown-day')[0].textContent = difDay
        elem.querySelectorAll('.countdown-hour')[0].textContent = difHour
        elem.querySelectorAll('.countdown-min')[0].textContent = difMin
        elem.querySelectorAll('.countdown-sec')[0].textContent = difSec
    });
}, 1000)    //1秒間に1度処理

以上、Javascriptで複数のカウントダウンタイマーを実装する方法でした！

カウントダウンを一つだけ実装する場合はこちら！
Javascriptでカウントダウンタイマーを実装【コピペでOK】