[javascript]カウントダウンタイマーを作成してみた。 #JavaScript

なぜ作ったか？

商品などを扱うサイトとかだとカウントダウンタイマー使ってるサイトがありますが、
実際に作ったことはなかったのでこの機会に作ってみました。

コード

html

<div id="log"></div>

javascriptでタイマーを出すので表示させるためのdivを用意しておきます。

javascript

const totalTime = 10000;
const oldTime = Date.now();

const timeId = setInterval(() => {
  const currentTime = Date.now();

  // 差分を求める
  const diff = currentTime - oldTime;

  const diffSec = totalTime - diff;

  //ミリ秒を整数に変換
  const remainSec = Math.ceil(diffSec / 1000);

  let text = `残り${remainSec}秒`;

  // 0秒以下になったら
  if (diffSec <= 0) {
    clearInterval(timeId);

    // タイマー終了の文言を表示する
    text = "終了";
  }

  // 画面に表示する
  document.querySelector('#log').innerHTML = text;
})

少し解説するとまず
totalTimeで10秒のミリ秒を設定しています。
oldTimeには読み込まれたときの時間を取得しています。

const diffで読み込まれた時間とsetintervalの中のconst currentTimeで差分を計算し、
const diffSecでtotalTimeからdiffを引いた値を計算しています。

const remainSecでは
Math.ceil関数を使用して引数で与えた数を整数に変換しています。
diffSecはミリ秒単位なので/(割る)1000で秒単位にしています。

diffSecが0秒以下になったらclearIntervalでsetIntervalを止めています。

まとめ

こんな感じでカウントダウンタイマーを作成できました。
ただ、これだけだと正直あまり使いどころはないので次回は期日を設けてその期日まで後何日かを表示するような使いどころが多そうなカウントダウンタイマーを作ってみたいと思います。