こんにちは、プログラマーの山本です。

今回はWebサイトに表示するカウントダウンタイマーをJavaScriptでサクッと作成しました。

「締め切りまで ◯日◯時間◯分◯秒」という表示にします。

簡単に作れるので、カウントダウンタイマーを設置したいとお考えの方は参考にしてください。

htmlでカウントダウンタイマーの設置箇所を追加する。

<div class="count-down-timer" id="count_down_timer"></div>

JavaScriptでカウントダウンタイマーを実装する。

タイマーに必要な定数を定義する。

//カウントダウンの終了日時を指定
const EndTime = new Date("2025/12/31 23:59:59");
//タイマーを表示する要素
const output = document.getElementById("count_down_timer");

タイマーを表示させる関数を定義する。

指定日時までの時間 diff を引数に設定し、
diff かプラスかそうでないかによって、表示を切り替えます。

function displayTime(diff) {
    if (diff > 0) {
        output.innerHTML= '締め切りまで ' + d + '日' + h + '時間' + m + '分' + s + '秒';
    }
    else{
        output.innerHTML= '締め切りました。';
    }
}

指定日時までの時間を計算する関数を定義する。

いよいよ指定日時までの時間を計算させます。

指定日時から現在日時を引いた値を、
日、時、分、秒、それぞれの値を取得します。

function calcRemainingTime() {
    //現在日時を取得
    const NowTime = new Date();
    //差分
    const diff = EndTime - NowTime;
    //計算
    d = Math.floor(diff / (24 * 60 * 60 * 1000));
    h = Math.floor(diff / (60 * 60 * 1000)) % 24;
    m = Math.floor(diff / (60 * 1000)) % 24 % 60;
    s = Math.floor(diff / 1000) % 24 % 60 % 60;
    //表示
    displayTime(diff);
}

一定間隔で上記の関数を実行させる。

setInterval(関数,ミリ秒)　で指定したミリ秒ごとに、
指定した関数を繰り返し実行させることが出来ます。

ただし、最初の0秒時点では実行されないので、
最初にそのまま calcRemainingTime 関数を実行させておきます。

calcRemainingTime();
setInterval(calcRemainingTime, 1000);

まとめ

上記のように、シンプルなJavaScriptでカウントダウンタイマーを作成することが出来ました。

必要に応じて、cssでデザインを整えたり、表示する形式を変更するなどしてお使いください。

制作の依頼はこちら

今回ご紹介したシステムなど、
WEB上にシステムを実装したい場合は弊社におまかせください。

簡単なシステムなら１件¥3,000（税別）から承ります。

相場よりも費用を抑えて対応させていただくことが可能ですので、
以下のフォームから相談内容を記入して気軽にご連絡ください。