カウントダウン機能の作成 #JavaScript

カウントダウン機能の作成

初期値120秒から1秒ずつカウントダウンする機能の作成。

<body onload="init()">
  <p>COUNT DOWN: <span id="time"></span></p>
</body>

ページを読み込んだときにperformance.nowで変数startTimeにその時点の時間をミリ秒で代入します。
setIntervalメソッドで1秒ごとに関数tickを呼び出します。

  <script>
    let startTime;

    function init() {
      startTime = performance.now();
      setInterval(tick, 1000);
    }

tick関数内は、まず変数nowTimeに関数tickが呼び出されたときの時間をperformance.nowで代入します。
body要素内のspan要素を取得してページを読み込んだときから経過した時間を120秒からカウントダウンする形式で表示します。
performance.nowはミリ秒で取得するので、1秒ごとにカウントダウンするように差分の時間を1000で割ります。

    function tick() {
      const nowTime = performance.now();
      const time = document.getElementById("time");
      time.textContent = 120 + Math.floor((startTime - nowTime) / 1000);
    }
  </script>

下記のコードをコピーしてファイルに貼り付ければ試せます。

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">

  <script>
    let startTime;

    function init() {
      startTime = performance.now();
      setInterval(tick, 1000);
    }

    function tick() {
      const nowTime = performance.now();
      const time = document.getElementById("time");
      time.textContent = 120 + Math.floor((startTime - nowTime) / 1000);
    }
  </script>
</head>

<body onload="init()">
  <p>COUNT DOWN: <span id="time"></span></p>
</body>
</html>