Menu
Coddy logo textTech

動くストップウォッチ

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)
challenge icon

チャレンジ

中級

JSファイルに以下の機能を追加してください:

  • 開始/停止ボタンがクリックされたら、ストップウォッチのテキストを1秒ごとに更新するインターバルを設定します。正しくフォーマットされていることを確認してください
  • 開始/停止ボタンが再度クリックされたら、実行中のインターバルをクリアします。

コードに setInterval を追加したら、ウェブビューのリセットボタンをクリックする必要があります:

Reset button location

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

ストップウォッチ - HTML/CSS/JS プロジェクトのすべてのレッスン

1はじめに

概要

4JS編

基本的な開始と停止プロジェクトレッスン動くストップウォッチプロジェクトレッスンリセットプロジェクトレッスン