[js]カウントダウンタイマーを作ってあるのを弄った

使うかもで調べた。

参考
やりたいこと
こうする
思ったこと

参考

やりたいことはこの記事を読めば実現する。

【JavaScript】カウントダウンタイマー実装 - Qiita

最初にカウントダウンタイマーを実装する学習をしたので、学んだことを記事にしたいと思います。今回はJavaScriptを使ってシンプルなカウントダウンタイマーを実装します。カウントダウンタイマー…

とは言うものの、ちょっと足りないのでいじる。

やりたいこと

参考だと「00:00:00」を「時分秒」にしてるけど、「分秒センチ秒（？）」にしたい。

残りn秒で装飾したい（時間を条件にClass付与とか）。

こうする

htmlは同じ。

<div id="countdown">00:00:00</div>

jsはこうする。

window.onload = function(){
    const countDown = document.getElementById('countdown'); 
    const targetTime = new Date().getTime() + 360000; //時間設定

    function updateCountDown(){
        const now = new Date().getTime();
        const distance = targetTime - now;

        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        const mseconds = Math.floor((distance % (1000)) / 10);

        countDown.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(mseconds).padStart(2, '0')}`;

        if(distance <= 10000){ //10秒前
            countDown.classList.add('caution');
        }

        if(distance < 0){
            clearInterval(interval);
            countDown.textContent = '終了しました';
        }
    }

    const interval = setInterval(updateCountDown);
    updateCountDown();
}

元記事のものと見比べるとあんまり手が入っていないっていうね。

sample

思ったこと

やりたいことができたのはいいんだけど、jsの上書き頻度が恐ろしく多い（処理）こと、スペック不足とかで処理が遅れたらどうなるんだ（精度）みたいなところは謎。

どうでしょうね。