【JavaScript】指定した日までのカウントダウンタイマー

本記事を読むと以下の実行ができます

ウェブページに指定した日にちまでのカウントダウンを表示する。

イベントやセールの告知、期間限定のキャンペーンなどで、
ユーザーの興味を引きつけたいとき、カウントダウンタイマーが有効です。

ECサイトや特別なプロモーションページを運営している方にとって、
カウントダウンタイマーは、期限付きの魅力を伝える強力なツールです。

この記事では、JavaScriptを使って指定した日までのカウントダウンタイマーを簡単に作成する方法を紹介します。

実装も手軽で、デザインに柔軟に対応できるこの技術を活用すれば、
訪問者の期待感を一層高めることができるでしょう。

本記事は次の人におすすめ

ECサイトやウェブショップを運営していて、セールやキャンペーンの告知を強化したい人
イベントページや特設サイトで、カウントダウンタイマーを使って緊迫感を演出したいデザイナー
JavaScriptのスキルを伸ばしたい、初学者や中級者
期間限定の特典やコンテンツを提供している企業のWeb担当者
自分のサイトをもっとインタラクティブにしたいウェブ開発者

Udemyで学習する

Udemy 公式サイト

ウェブ版カウントダウンタイマーはいつ使う？
- カウントダウンタイマーを使う場面とメリット
JavaScriptで時間を扱う
特定の時間までのカウントダウンタイマーを作成
まとめ

ウェブ版カウントダウンタイマーはいつ使う？

カウントダウンタイマーは、ユーザーの視線を引きつけ、緊迫感を演出するために非常に有効です。

特に期間限定のセールや、イベントの告知、製品の発売日までの時間を表示する場面で使われます。
タイマーが刻む秒数が減っていくのを見て、訪問者は時間の経過を意識し、早めのアクションを取るよう促す効果があります。

カウントダウンタイマーを使う場面とメリット

プロモーションセール: セール終了までの時間を視覚的に示すことで、顧客の購買意欲を刺激します。
イベント告知: イベント開始までの時間をカウントダウンし、参加者の期待感を高めます。
製品発売: 新製品やサービスのリリースまでの時間をカウントダウンし、話題性を作ります。
キャンペーンの締め切り: 応募や登録の締め切りまでの時間を表示し、行動を促します。
限定コンテンツの公開: 期間限定のビデオや記事が公開されるまでの時間を表示し、ユーザーの関心を引きます。

JavaScriptで時間を扱う

JavaScriptは、時間を扱うための強力な関数やオブジェクトを提供しています。

一般的な時間関数

Date()：現在・特定の日付と時刻を取得
getTime()：時間差の計算
Math.floor()：数字を計算する
setInterval()：繰り返し処理・タイマー機能・動的な更新
clearInterval()：インターバルの停止・タイマー解除

これら関数は時間を計算し、ページに動的な要素を追加できますので、
カウントダウンタイマーを簡単に実装できます。

特定の時間までのカウントダウンタイマーを作成

ここからは、特定の日時までのカウントダウンタイマーを作成します。
時間を取得して、動的に動かします。

さらに、時間は点滅をさせて、指定した時間を過ぎると、文字の色を変えます。

HTML

HTMLでは、カウントダウンタイマーの基本構造を作成します。タイマーの要素を配置し、それぞれの時間単位を表示するためのタグを設定します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="countdown">
        <div class="material">
            <div class="left">
                <a href="https://alicia-ing.com/"><img src="/images/alicia.png" height="150 px"></a>
                <p class="Lmessage">最大<span class="rate">50</span>%OFF</p>
            </div>
            <div class="right">
                <div class="notice">
                    <p class="Rmessage">終了まで</p>
                </div>
                <div class="time-container">
                    <div class="time-element">
                        <div class="time"><span id="hour"></span></div>
                        <div class="timelog">
                            <p>時間</p>
                        </div>
                    </div>
                    <p class="colon">：</p>
                    <div class="time-element">
                        <div class="time"><span id="min"></span></div>
                        <div class="timelog">
                            <p>分</p>
                        </div>
                    </div>
                    <p class="colon">：</p>
                    <div class="time-element">
                        <div class="time"><span id="sec"></span></div>
                        <div class="timelog">
                            <p>秒</p>
                        </div>
                    </div>
                </div>
                <p></p>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

解説

「.countdown」：カウントダウンタイマー全体を囲むコンテナ。カウントダウンタイマーのデザインや配置を制御するために使用されます。

「.material」：カウントダウンタイマーの主要なコンテンツを包む要素。タイマーの左側と右側のコンテンツをまとめて配置します。

「.left」：左側のコンテンツを含む要素。リンクされた画像とメッセージを表示します。

「.right」：右側のコンテンツを含む要素。カウントダウンタイマーや関連するメッセージを表示します。

「.notice」：カウントダウンの通知メッセージを表示するための要素。

「.Lmessage」：左側に表示される割引に関するメッセージのスタイリングを行うためのクラス。

「.Rmessage」：右側に表示される「終了まで」のメッセージのスタイリングを行うためのクラス。

「.time-container」：時間、分、秒の各タイム要素をまとめて配置するためのコンテナ。

「.time-element」：個別のタイム要素（時間、分、秒）を囲む要素。各時間単位の値とそのラベルを含みます。

「.time」：実際の時間値（時間、分、秒）を表示するための要素。

「.timelog」：時間の単位（「時間」「分」「秒」）を示すラベルを表示するための要素。

「.colon」：時間の間に表示されるコロン（「：」）をスタイルするためのクラス。

「hour」：残りの「時間」を表示するために使用されるHTMLの要素ID。動的に時間が更新されます。

「min」：残りの「分」を表示するために使用されるHTMLの要素ID。動的に分が更新されます。

「sec」：残りの「秒」を表示するために使用されるHTMLの要素ID。動的に秒が更新されます。

CSS

このスタイルシートは、カウントダウンタイマーを視覚的に目立たせ、ユーザーの注意を引くためのデザインが施されています。

各要素がフレックスボックスを使ってレイアウトされ、中央に配置されることで、見やすく整ったUIが実現されています。

.countdown{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight:bold;
    margin: 0;
    background-color: #f0f0f0;
}

.material{
display:flex;
}

.material p{
    font-size: 1.5em;
}

.left{
flex: auto;
display: inline-block;  
vertical-align: bottom;
flex-flow: column;
text-align: center;
margin: 5px;
}

.image{
    width: 130px;
    height: auto;
}

.rate{
    font-size: 3rem;
}

.right{
flex: auto;
flex-flow: column;
text-align: center;
display: inline-block;  
vertical-align: bottom;
margin: 5px;
}

.notice{
    flex: auto;
    display: flex;
    flex-flow: column;
    text-align: center;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.5em;
}

.Lmessage{
    text-align: center;
    margin: 0;
}

.Rmessage{
    text-align: center;
    margin: 0;
}

.time-container {
    display: flex;
    align-items: center;
}

.time-element {
    display:flex;
    flex-flow: column;
    text-align: center;
}


.colon {
    font-size: 1em; /* 必要に応じてサイズ調整 */
    line-height: 1; /* 必要に応じて調整 */
    margin-bottom: 65px;
}


.time {
    width: 100px;
    height: 100px;
    margin: .2rem;
    background-color: #A435F0;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.time p{
    margin: 0;
    font-size: 2em;
    text-align: center;
}


.timelog p{
margin: 0;
}

#hour,#min,#sec {
    font-size: 3rem;
    animation: fade 2s infinite;
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

解説

「.countdown」：全体を囲むコンテナのデザインです。フレックスボックスを使用してコンテンツを中央揃えにし、背景色が薄いグレー（#f0f0f0）に設定されています。テキストは太字で表示されます。

「.material」：内部コンテンツを横に並べるためにフレックスボックスが使用されています。子要素である左側と右側のコンテンツが横並びに表示されます。

「.material p」：material内のpタグに対して適用されるスタイルです。フォントサイズが1.5emで、標準の文字よりも少し大きめに表示されます。

「.left」：左側のコンテンツのスタイリングです。自動でサイズ調整され、縦方向に整列されます。中央揃えで表示され、上下に5pxの余白が設定されています。

「.image」：画像のサイズが幅130px、高さは自動で調整されます。アスペクト比を維持しながら表示されます。

「.rate」：割引率を表示する部分のデザインです。フォントサイズが3remと非常に大きく設定され、強調されて表示されます。

「.right」：右側のコンテンツのスタイリングです。leftクラスと同様に、中央揃えで配置され、上下に5pxの余白があります。

「.notice」：通知メッセージのデザインです。中央揃えで表示され、要素が縦に配置されます。フォントサイズは1.5emで、テキストがやや大きめに表示されます。

「.Lmessage」：左側のメッセージのスタイリングです。中央揃えで配置され、余白はありません。

「.Rmessage」：右側のメッセージのスタイリングです。Lmessageと同様に、中央揃えで余白はありません。

「.time-container」：タイマー全体を包むコンテナのデザインです。フレックスボックスを使用し、タイム要素を中央揃えに配置します。

「.time-element」：個々のタイム要素（時間、分、秒）のデザインです。縦方向に整列し、中央揃えで表示されます。

「.colon」：タイム要素間のコロン（「：」）のデザインです。フォントサイズが1emで、垂直位置が調整され、マージンボトムが65pxで指定されています。

「.time」：各タイム要素の背景と配置に関するデザインです。100px×100pxのボックスに背景色が紫色（#A435F0）で設定され、角が丸く（border-radius: 1rem）なっており、中央に時間が表示されます。

「.time p」：タイム要素内のテキスト（時間値）のスタイリングです。フォントサイズが2emで、ボックス内で中央揃えされます。

「.timelog p」：タイムラベル（時間、分、秒）のスタイリングです。余白はなく、テキストがシンプルに表示されます。

「#hour,#min,#sec」：時間、分、秒を表示するテキストのスタイリングです。フォントサイズが3remで非常に大きく、2秒ごとにフェードイン・フェードアウトするアニメーションが適用されています。

「@keyframes fade」：#hour, #min, #sec要素に適用されるフェードアニメーションの定義です。0%から100%までの間で透明度が変化し、視覚的に点滅する効果が得られます。

UdemyでWebデザインを学習

Udemyは、オンデマンド式の学習講座です。
趣味から実務まで使えるおすすめの講座を紹介します。

ちゃんと学ぶ、WordPress テーマ開発講座
WordPressの自作テーマを作成してWordPressの仕組み理解。
WordPressで高度なカスタマイズをしたい人におすすめ。

【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）
フロントエンド言語でフレームワークの扱い方、セキュリティーを学習。
Web開発を学びたい初心者から経験者までにおすすめ。

【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編)
Webシステムの仕組みと挙動、システム構築などを学習。
サーバーに関わる知識を付けたい人におすすめ。

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
基礎レベルから実務レベルまで網羅していて、JSとCSSに焦点を当てた講座。
Webデザインをしたい人におすすめ。

JavaScript

JavaScriptでは、現在の時間と指定した時間との差を計算し、タイマーを動的に更新します。
指定した時間が過ぎると、タイマーを停止させることも可能です。

const hour = document.getElementById("hour");
const min = document.getElementById("min");
const sec = document.getElementById("sec");

function countdown() {
  const now = new Date(); // 現在時刻を取得
  const month = 12; // 月を取得
  const day = 31; // 日を取得
  const targetHour = 15; // 時間を指定。午後の場合は+12
  const bargain = new Date(2024, month - 1, day, targetHour);
  const diff = bargain.getTime() - now.getTime();

  // 残り時間が1時間以内になったら、文字色を黄色にする
  if (diff <= 3600000) {
    hour.style.color = 'yellow';
    min.style.color = 'yellow';
    sec.style.color = 'yellow';
  }

  // 残り時間が0以下になったら、カウントアップを止める
  if (diff <= 0) {
    hour.innerHTML = '00';
    min.innerHTML = '00';
    sec.innerHTML = '00';
    clearInterval(countdownInterval); // インターバルをクリア
    return;
  }

  const calcHour = Math.floor(diff / 1000 / 60 / 60);
  const calcMin = Math.floor(diff / 1000 / 60) % 60;
  const calcSec = Math.floor(diff / 1000) % 60;

  hour.innerHTML = calcHour < 10 ? '0' + calcHour : calcHour;
  min.innerHTML = calcMin < 10 ? '0' + calcMin : calcMin;
  sec.innerHTML = calcSec < 10 ? '0' + calcSec : calcSec;
}

// インターバルをグローバル変数に格納
let countdownInterval;

// 初期化とインターバルの設定
function startCountdown() {
  countdown();
  countdownInterval = setInterval(countdown, 1000);
}

startCountdown();