カテゴリー
CSS HTML JavaScript Webサイト作成

新年へのカウントダウンタイマー

こんにちは、エムケーワイです。

師走に突入したということで、新年へのカウントダウンタイマーを作ってみました。「東京オリンピック開幕まであとxx日xx時間xx分xx秒」と表示しているようなやつです。

2021年以降も動作するよう、新年の西暦を自動更新するようにしました。2021年になった途端「2022年まであと…」と表示されるはずです^_^;

日時の取得や新年までの残り時間の計算・表示には、これまで使っていたjQueryではなくJavaScriptを使うことにしました。私はJavaScriptをすっ飛ばして、いきなりjQueryの勉強から始めたのですが、最近の情勢？を見るとやはりJavaScriptは習得しておく必要があるなと思い、遅ればせながら勉強を始めた次第です。

それでは、まずカウントダウンタイマーの動作をご覧いただき、次に作成手順を説明します。

目次 [閉じる]
  1. 作成したカウントダウンタイマー
  2. HTMLコード
  3. JavaScriptコード
  4. CSS設定
  5. まとめ

1. 作成したカウントダウンタイマー

年まで

あと 日 時間 分 秒

2. HTMLコード

今回作成したHTMLコードは下記の通りです。

<section id="cdtSection">
    <p><span id="nextYear"></span>年まで</p>
    <p class="countDownTimer">あと <span id="day"></span>日 <span id="hour"></span>時間 <span id="min"></span>分 <span id="sec"></span>秒</p>
</section>

<script src="https://mky-memo.com/wp-content/themes/twentytwenty_ch/mkyCountDownTimer.js"></script>
  1. sectionタグでカウントダウンタイマーを囲みます。idはCSS設定を行うためのもので、カウントダウンタイマーの動作に関係するものではありません。
  2. “XXXX年まで”をh3タグで囲みます。”XXXX”は西暦でJavaScriptで算出します。また、JavaScriptでspan要素のテキストコンテンツとして挿入できるよう、spanタグにidを設定します。
  3. カウントダウンタイマーの本体部分をpタグで囲みます。日、時間、分、秒の値はJavaScriptで算出します。また、それらをJavaScriptで対応するspan要素のテキストコンテンツとして挿入できるよう、各spanタグにidを設定します。
  4. カウントダウンタイマーの処理がプログラムされたJavaScriptファイル(mkyCountDownTimer.js)を読み込みます。

3. JavaScriptコード

現在時刻を取得し、新年までの残り時間を算出する処理、残り時間を表示・更新する処理は、前述の通りJavaScriptで実現しています。

今回作成したJavaScriptコードは下記の通りです。

'use strict'

/* 残り時間を算出する関数 */
function getRemain(now, target) {
    const remain = target.getTime() - now.getTime();
    const sec = Math.floor(remain / 1000) % 60;
    const min = Math.floor(remain / 1000 / 60) % 60;
    const hour = Math.floor(remain / 1000 / 60 / 60) % 24;
    const day = Math.floor(remain / 1000 / 60 / 60 / 24);
    const remainEle = [day, hour, min, sec];
	
    return remainEle;
}

/* カウントダウンタイマー関数 */
function countDownTimer() {
    const now = new Date();
    const nextYear = now.getFullYear() + 1;
    const target = new Date(nextYear, 0, 1);

    // 残り時間を算出
    const remain = getRemain(now, target);

    // 残り時間を表示
    document.getElementById('nextYear').textContent = nextYear;
    document.getElementById('day').textContent = remain[0];
    document.getElementById('hour').textContent = remain[1];
    document.getElementById('min').textContent = String(remain[2]).padStart(2, '0');
    document.getElementById('sec').textContent = String(remain[3]).padStart(2, '0');

    // 残り時間を更新
    update();
}

/* 残り時間を更新する関数 */
function update() {
    setTimeout(countDownTimer, 1000);
}

/*
* 新年までのカウントダウン処理
*/
countDownTimer();

3-1. function getRemain(now, target)

現在の日時(引数now)からターゲット日時(引数target)までの残り時間を算出する関数です。

  1. 定数remainに、ターゲット日時と現在の日時の差分(残り時間)を格納します。getTimeメソッドは、1970年1月1日0時0分からの経過時間をミリ秒単位で取得します。
  2. 残り時間を秒、分、時間、日に分解し、それぞれ定数sec、min、hour、dayに格納します。
  3. 定数sec、min、hour、dayを要素とする配列remainEleを定義します。
  4. 配列remainEleを返します。

3-2. function countDownTimer()

新年までの残り時間を算出、表示する関数です。1秒毎に表示の更新も行います。

  1. 定数nowに現在の日時を格納します。Dateオブジェクトを定義する際は”new”が必要です。パラメータなしの場合、現在の日時が格納されます。
  2. 定数nextYearに新年の西暦を格納します。
  3. 定数targetを新年1月1日0時0分で初期化します。パラメータは、先頭から年、月、日です。分、秒を指定しない場合、0時0分となります。なお、月は-1した値を指定します。1月の場合は’0’を指定します。
  4. 関数getRemain()で新年までの残り時間を算出し、定数remainに格納します。
  5. HTMLコード内の各span要素に新年の西暦、新年までの残り時間の日、時間、分、秒をテキストコンテンツとして挿入します。各span要素の取得にはdocumentオブジェクトのgetElementByIdメソッドを使用します。なお、分、秒については、StringオブジェクトのpadStartメソッドを用いて常時2桁表示されるようにしています。
  6. 関数update()を呼び出し、新年までの残り時間を更新します。

3-3. function update()

新年までの残り時間を更新する関数です。

  1. setTimeoutメソッドを用いて、1秒(1000ミリ秒)毎に関数countDownTimer()が実行されるように設定します。

3-4. メイン処理

  1. 関数countDownTimer()を呼び出します。

4. CSS設定

今回の主目的はカウントダウンタイマーの実現ですので、CSS設定には注力していませんが、一応カウントダウンタイマーに関連するCSS設定を以下に示しておきます。

#cdtSection {
    background-color: white;
    margin-bottom: 0;
    padding: 3rem 0 3rem 1rem;
    font-weight: bold;
    font-size: 3.5vw;
    color: #444444;
}

#cdtSection span {
    color: red;
    font-size: 7vw;
}

#cdtSection #nextYear {
    color: blue;
}
  • カウントダウンタイマーの背景色、パディング、フォントサイズ、文字色等を設定しています。
  • ブレイクポイントを設定しなくてもフォントサイズがビューポートの幅に応じて変動するよう、フォントサイズの単位を”vw”としています。

5. まとめ

JavaScriptを使って新年までの残り時間を表示・更新するカウントダウンタイマーを作成しました。

来年以降も動作するよう、新年の西暦を自動更新するようにしています。

今回のポイントは、

  • getTimeメソッドで日時を1970年1月1日0時0分からの経過時間(ミリ秒単位)に変換し、新年までの残り時間を計算すること
  • getElementByIdメソッドでHTMLコード内の対象とする要素を取得し、そのコンテンツを操作すること
  • 上記の処理を周期的に繰り返すこと

だったかと思います。

デザイン的にはイマイチかもしれませんが、とりあえず問題なく動作するカウントダウンタイマーが実現できたのではないでしょうか？

これを機に、今後もJavaScriptの勉強を続け、いろいろな動的ページの作成にトライして行きたいと考えています。

最後までお読みいただきありがとうございました。