WEBシステム

JavaScriptで指定日時までのカウントダウンタイマーを作成


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

今回は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上にシステムを実装したい場合は弊社におまかせください。

簡単なシステムなら1件¥3,000(税別)から承ります。

格安での対応が可能ですので、
以下のフォームから相談内容を明記の上、お気軽にご相談いただければと思います。

必須 お名前
必須 メールアドレス
任意 サイトのURL
必須 ご依頼内容や相談内容

※出来るだけ具体的に記載していただけると進行がスムーズになります。
任意 画像やPDF

※必要があれば添付してください。




原則1営業日以内に、お見積りと決済リンクのご案内を送らさせていただきます。

  • この記事を書いた人
  • 最新記事
Yamamoto

Yamamoto

JavaScript、PHPをメインで扱うWEBプログラマー。Wordpressを主としたWEBサイトにシステムを導入する仕事を多くこなしてきた。 自身のブログを月間20万PVに導いた実績をもち、サイトやブログの集客・運営も手がける。

-WEBシステム

© 2020 Web(ウェブ)の便利屋Lallapallooza(ララパルーザ)