ストップウォッチを実装したい | 日付・時間操作

このプログラムでは、JavaScriptのsetInterval()メソッドを使用して、1秒ごとにカウントアップするシンプルなストップウォッチを実装します。ストップウォッチの開始、停止、リセットをそれぞれボタンで操作できます。

INDEX

使用するメソッド: setInterval(), clearInterval()
ストップウォッチを実装するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Windowオブジェクトメソッドの機能一覧

使用するメソッド: setInterval(), clearInterval()

ストップウォッチはsetInterval()メソッドを使用して、1秒ごとに指定した関数を実行します。clearInterval()メソッドを使用するとストップウォッチを停止できます。

ストップウォッチを実装するプログラム

以下のコードでは、ストップウォッチを開始、停止、リセットする機能を実装し、その結果を表示しています。

0 秒経過

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ストップウォッチを実装する方法</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        pre {
            background: #f4f4f4;
            border-left: 3px solid #ccc;
            padding: 10px;
            margin: 20px 0;
        }
        .timer {
            font-size: 2em;
            margin: 20px 0;
        }
    </style>

    <script>
        let timer;
        let seconds = 0;

        // ストップウォッチを開始する関数
        function startTimer() {
            timer = setInterval(() => {
                seconds++;
                document.getElementById('timerDisplay').textContent = seconds + " 秒経過";
            }, 1000); // 1秒ごとにカウントアップ
        }

        // ストップウォッチを停止する関数
        function stopTimer() {
            clearInterval(timer);
        }

        // ストップウォッチをリセットする関数
        function resetTimer() {
            clearInterval(timer);
            seconds = 0;
            document.getElementById('timerDisplay').textContent = "0 秒経過";
        }
    </script>
</head>
<body>

    <h1>ストップウォッチを実装する方法</h1>

    <div class="timer" id="timerDisplay">0 秒経過</div>

    <button onclick="startTimer()">開始</button>
    <button onclick="stopTimer()">停止</button>
    <button onclick="resetTimer()">リセット</button>

</body>
</html>