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

カウントダウンタイマーFrontend


実装イメージ

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

今月の終わりまで

時間





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>




connaiconnai

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でカウントダウンタイマーを実装する方法でした!

コメント

タイトルとURLをコピーしました