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

セール開始まであと「○日○時間○分○秒」

よくECサイトのセールや、各種イベントの告知ページに使用される「カウントダウンタイマー」をJavaScriptで作ってみます。
実際のECサイトやイベント告知ページへの実装を想定し、後からCSSで修飾しやすいような記述も意識して書いてみたいと思います。

HTML

<div class="container">
      <p class="announce">新春セール開始まであと...</p>
      <p class="timer">
        <span class="date"></span>日
        <span class="hour"></span>時間
        <span class="min"></span>分
        <span class="sec"></span>秒
      </p>
</div>

後からタイマー周りのstyleを自由に設定しやすいよう、日・時・分・秒で別のclassを付与しておきます。

JavaScript

let date = document.querySelector(".date");
let hour = document.querySelector(".hour");
let min = document.querySelector(".min");
let sec = document.querySelector(".sec");

まずは日・時・分・秒それぞれの変数（定数constでも可）を宣言。
今回はclassを取得するのでquerySelectorを使用。

function countDown(){
let now = new Date();
let end = new Date("2022/1/1 00:00");
let diff = end - now;
let diffSec = Math.floor(diff / 1000);

関数countDownを作っていきます。
まずは現在日時、ターゲットとなる日時（今回の場合はセール開始日時）を取得。
セール開始日時と現在日時の時差こそが「あと○日○時間○分○秒」となるので、引き算で求めます。
このままだとミリ秒単位で出力されてしまうので、1000で割り算をし、さらにMath.foorメソッドを用いて小数点以下を切り捨て、整数に直します。

let dateSec = 60 * 60 * 24;
let hourSec = 60 * 60;
let minSec = 60;

日・時・分をそれぞれを秒数に直す。
1日＝60秒×60分×24時間
1時間＝60秒×60分
1分＝60秒

let Days = Math.floor(diffSec / dateSec);
let Hours = Math.floor(diffSec / hourSec % 24);
let Minutes = Math.floor(diffSec / minSec % 60);
let Seconds = Math.floor(diffSec % 60);

ターゲット日時までの時差の秒数を求めていきます。
割った数の結果が「70分」だった場合「1時間10分」としたいので、割った数の余りを返す「%」を用います。

date.innerHTML = Days;
hour.innerHTML = Hours;
min.innerHTML = Minutes;
sec.innerHTML = Seconds;

setTimeout(countDown, 1000);

HTML内のclass指定した個所を、毎秒ごと求めた時差数値に書き換えていきます。

   let date = document.querySelector(".date");
   let hour = document.querySelector(".hour");
   let min = document.querySelector(".min");
   let sec = document.querySelector(".sec");

   function countDown(){
       let now = new Date();
       let end = new Date("2022/1/1 00:00");
       let diff = end - now;
       let diffSec = Math.floor(diff / 1000);

       let dateSec = 60 * 60 * 24;
       let hourSec = 60 * 60;
       let minSec = 60;

       let Days = Math.floor(diffSec / dateSec);
       let Hours = Math.floor(diffSec / hourSec % 24);
       let Minutes = Math.floor(diffSec / minSec % 60);
       let Seconds = Math.floor(diffSec % 60);

       date.innerHTML = Days;
       hour.innerHTML = Hours;
       min.innerHTML = Minutes;
       sec.innerHTML = Seconds;

       setTimeout(countDown, 1000);
   }countDown();

最後に関数countDownを実行して、JSの記述は完成です。

CSS

簡単ですがstyleも適用してみました。
日・時・分・秒を個別に出力しているので、デザインの自由度が高い状態かと思います。

<style>
      .container {
        text-align: center;
      }
      .announce {
        font-size: 1.4rem;
        font-weight: 600;
        color: #fff;
        width: 500px;
        background-color: #f94f7e;
        margin: 1rem auto 0;
        box-shadow: 0 4px 4px rgb(0 0 0 / 20%);
      }
      .timer {
        font-size: 1.5rem;
        font-weight: 600;
        color: #505050;
        margin: 0 auto;
        width: 500px;
        background-color: #f1f1f1;
        box-shadow: 0 4px 0px rgb(0 0 0 / 20%);
      }
      .date {
        font-size: 2em;
        color: #f94f7e;
      }
      .hour,
      .min,
      .sec {
        font-size: 1.7em;
        color: #ff6a00;
        margin-left: 0.5rem;
      }
</style>

以上、JavaScriptで作るカウントダウンタイマーでした。
ミリ秒単位で考え設定するのが慣れるまで大変ですね...。