画面にタイマーをカウントダウン表示してみます。
今回は60秒カウントです。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<style>
body, html {
height: 100%;
display: flex; /* フレックスコンテナボックス作成 */
justify-content: center;
align-items: center;
margin: 0;
background-color: black;
}
#countdown {
font-size: 100px;
color: white;
font-weight: bolder;
}
#completed {
display: none;
font-size: 100px;
color: red;
font-weight: bolder;
}
</style>
</head>
<body>
background=black;
<div id="countdown">1:00</div>
<div id="completed">完了</div>
<script>
// カウントダウンを開始する関数
function startCountdown(duration, display) {
var timer = duration, minutes, seconds;
var timerInterval = setInterval(function () {
minutes = parseInt(timer / 60, 10);
/* timer / 60 は、timerの値を60で割った結果。
これにより、経過した時間（秒数）を
分単位で表すことができる。
例えば、timerが180の場合、timer / 60は3になる。
parseInt(timer / 60, 10) は、
timer / 60 の結果を整数に変換することを示す。
第二引数の10は、基数（数値の基礎となる数）で、
10進数を意味する。
したがって、この行全体は、
timerの値を60で割った結果を整数に変換し、
その結果をminutes変数に代入する。*/
seconds = parseInt(timer % 60, 10);
/* timer % 60 は、timerの値を60で割った余りを示す。
これにより、経過した時間（秒数）を
60秒ごとの範囲に収めることができる。
例えば、timerが180の場合、timer % 60は0になる。
parseInt(timer % 60, 10) は、
timer % 60 の結果を整数に変換することを示す。
第二引数の10は、基数（数値の基礎となる数）で、
10進数を意味する。
したがって、この行全体は、
timerの値を60で割った余りを整数に変換し、
その結果をseconds変数に代入する。*/
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
/*minutes（seconds）が10未満の場合（条件が真の場合）、
"0" + minutes（seconds）が minutes の先頭に追加。
例えば、minutes（seconds）が9なら、
"0" + 9は"09"となります。
それ以外の場合（条件が偽の場合）、
minutes（seconds）はそのままの値を保持。*/
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
clearInterval(timerInterval);
display.style.display = 'none';
document.getElementById('completed').style.display
= 'block';
}
}, 1000);
return timerInterval;
}
// カウントダウンを表示・開始
window.onload = function () {
var countdownDuration = 60; // カウントダウンの秒数
var display = document.getElementById('countdown');
var timerInterval = startCountdown(countdownDuration,
display);
};
</script>
</body>
</html>
<!-- index.html -->
