【JavaScript】カウントダウンタイマー（ミリ秒）の作り方

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでミリ秒まで表示するカウントダウンタイマーの作り方をご紹介しています。

上記の疑問にお答えします。

では、解説いたします。

カウントダウンタイマーの作り方

カウントダウンタイマーを作成します。タイトルにもある通りミリ秒を含む形式となります。表示形式は「〇日〇時〇分〇秒〇ミリ秒」となるため、表示に必要な要素を設置します。

HTML

<!-- countdown -->
<div class="countdown">
    <span class="countdown__time js-countdown-day">0</span>
    <span class="countdown__unit">日</span>
    <span class="countdown__time js-countdown-hour">00</span>
    <span class="countdown__unit">時間</span>
    <span class="countdown__time js-countdown-min">00</span>
    <span class="countdown__unit">分</span>
    <span class="countdown__time js-countdown-sec">00</span>
    <span class="countdown__unit">秒</span>
    <span class="countdown__time js-countdown-ms">00</span>
</div><!-- /countdown -->

続いてJavaScriptで現在の日時から指定した日時までカウントダウンの処理を作成します。現在の日時から指定した対象日時までの残りの日時を取得し、日時分秒ミリ秒に分割して出力します。

JavaScript

const countdown = ()=>{
    const now = new Date(); //現在日時
    const target = new Date('2023/12/31 23:59:59'); //対象日時
    const differ = target.getTime() - now.getTime(); //残り日時

    const ms = Math.floor(differ); //ミリ秒
    const sec = Math.floor(differ / 1000 % 60); //秒
    const min = Math.floor(differ / 1000 / 60 % 60); //分
    const hour = Math.floor(differ / 1000 / 60 / 60 % 24); //時
    const day = Math.floor(differ / 1000 / 60 / 60 / 24); //日

    document.querySelector('.js-countdown-ms').textContent = String(ms).slice(-3, -1); //ミリ秒出力 末尾の2桁を表示する場合はslice(-2)に変更
    document.querySelector('.js-countdown-sec').textContent = String(sec).padStart(2, '0'); //秒出力
    document.querySelector('.js-countdown-min').textContent = String(min).padStart(2, '0'); //分出力
    document.querySelector('.js-countdown-hour').textContent = String(hour).padStart(2, '0'); //時出力
    document.querySelector('.js-countdown-day').textContent = String(day).padStart(2, '0'); //日出力
}
setInterval(countdown, 1);

実行結果は下記の通りです。現在の日時から指定日までのカウントダウンタイマーが出力されます。

実行結果

See the Pen 7955 by ryohei (@intotheprogram) on CodePen.

最後に

JavaScriptでカウントダウンタイマーを作ることは結構ありますが、ミリ秒まで表示することが初めてでしたので、忘備録的に内容を整理しました。一度作ってしまえば使い回せるのは、プログラミングの長所ですよね。もし同じようなカウントダウンタイマーを作られる方の参考になれば幸いです！

以上、JavaScriptのカウントダウンタイマー（ミリ秒）の作り方のご紹介でした！