カウントダウン機能の作成
初期値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>