動くストップウォッチ
Coddyの「ストップウォッチ - HTML/CSS/JS プロジェクト」コースのレッスン 9/10。
開始ボタンと停止ボタンが機能するようになったので、いよいよカウントを開始しましょう!
カウントを行うには、JavaScriptの setInterval という関数を使用します:
const interval = setInterval(func, milliseconds)この関数は、関数とミリ秒を表す数値の2つの引数を受け取ります。指定されたミリ秒ごとに、その関数が呼び出されます。
例えば以下のようになります:
let count = 0
function updateCount() {
count += 1;
}
const interval = setInterval(updateCount, 1000)上記の例では、1秒ごとに count 変数を1ずつ増やしています。
インターバルを停止したい場合は、setInterval の戻り値を引数に指定して clearInterval を使用します:
const interval = setInterval(updateCount, 1000)
clearInterval(interval)チャレンジ
中級JSファイルに以下の機能を追加してください:
- 開始/停止ボタンがクリックされたら、ストップウォッチのテキストを1秒ごとに更新するインターバルを設定します。正しくフォーマットされていることを確認してください。
- 開始/停止ボタンが再度クリックされたら、実行中のインターバルをクリアします。
コードに setInterval を追加したら、ウェブビューのリセットボタンをクリックする必要があります:

自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>