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

指定した時間まで1秒単位でリアルタイムにカウントダウンしてくれるタイマーをjavascriptで実装する方法について記します。

Contents

実装イメージ
HTML
Javascript

実装イメージ

下記のようなカウントダウンタイマーをさくっと実装します。

今月の終わりまで

日時間分秒

HTML

<div id="countdownArea" class="countdown">
    <span id="countdown-day"></span>日
    <span id="countdown-hour"></span>時間
    <span id="countdown-min"></span>分
    <span id="countdown-sec"></span>秒
</div>

Javascript

3行目でターゲット日時を指定しています。ここでは今月末を動的に取得していますが、『const target = new Date("2022/3/11 1:00:00") 』のように静的に指定することもできます。

let countdown = setInterval(function(){
    const now = new Date()  //今の日時
    const target = new Date(now.getFullYear(), now.getMonth() + 1, 0,'23','59','59') //ターゲット日時を取得
    const remainTime = target - now  //差分を取る（ミリ秒で返ってくる

    //指定の日時を過ぎていたら処理をしない
    if(remainTime < 0) return false 

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

    //残りの日時を上書き
    document.getElementById("countdown-day").textContent  = difDay
    document.getElementById("countdown-hour").textContent = difHour
    document.getElementById("countdown-min").textContent  = difMin
    document.getElementById("countdown-sec").textContent  = difSec

    //指定の日時になればカウントを止める
    if(remainTime < 0) clearInterval(countdown)

}, 1000)    //1秒間に1度処理

カウントダウンタイマーを複数動かしたい場合はこちらの記事が参考になるかと思われます。
Javascriptで複数のカウントダウンタイマーを実装【コピペでOK】

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