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

こんにちは、ryohei(@ityryohei)です!

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

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のカウントダウンタイマー(ミリ秒)の作り方のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。