カップラーメンタイマーを作りたい
山崎講師3分間を計測するカウントダウンタイマーです。
ポイントは、19行目でsetInterval関数の戻り値をset_idという変数に入れて、23行目でclearInterval関数の引数にその値を渡している点です。
<!DOCTYPE html>
<html>
<head>
<title>countdown-timer.html</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>3分間タイマー</h1>
<button id="start">スタート</button>
<div id="display">0</div>
<script>
const start = document.querySelector("#start");
const display = document.querySelector("#display");
let count = 0;
start.addEventListener("click", () => {
const set_id = setInterval(() => {
count++;
display.innerHTML = count;
if (count === 180) {
clearInterval(set_id);
display.innerHTML = "done";
count = 0;
}
}, 1000);
});
</script>
</body>
</html>