カウントダウンタイマーを作成したい | 日付・時間操作

カウントダウンタイマーを作成したい | 日付・時間操作 | JavaScript 目的別リファレンス

目的別リファレンス

2024.09.222024.09.23

このプログラムでは、JavaScriptのsetInterval()メソッドを使用して、1秒ごとにカウントダウンを行うシンプルなカウントダウンタイマーを作成します。タイマーがゼロに達したら「時間切れ」と表示されます。ボタンを使ってタイマーの開始、リセットが可能です。

使用するメソッド: setInterval(), clearInterval()
カウントダウンタイマーを作成するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Windowオブジェクトメソッドの機能一覧

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

カウントダウンタイマーは、setInterval()メソッドを使って1秒ごとに実行されます。このメソッドは、特定の間隔（ここでは1秒ごと）で指定された関数を繰り返し実行するため、カウントダウンのような処理に適しています。また、clearInterval()を使うことで、タイマーを停止することができます。

カウントダウンタイマーを作成するプログラム

以下のコードでは、60秒からカウントダウンするタイマーを開始し、ゼロになった時点で「時間切れ」と表示します。リセットボタンを押すと、タイマーを停止し、秒数を60秒に戻すことができます。

60 秒残り

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 countdownTimer; // カウントダウンのタイマーを保持する変数
        let countdownSeconds = 60; // 初期値として60秒を設定

        // カウントダウンタイマーを開始する関数
        function startCountdown() {
            // setIntervalで毎秒実行
            countdownTimer = setInterval(() => {
                countdownSeconds--; // 秒数を1ずつ減らす
                document.getElementById('countdownDisplay').textContent = countdownSeconds + " 秒残り"; // 表示を更新

                // 残り時間が0秒以下になったらタイマーを停止
                if (countdownSeconds <= 0) {
                    clearInterval(countdownTimer); // タイマーを停止
                    document.getElementById('countdownDisplay').textContent = "時間切れ！"; // 終了メッセージを表示
                }
            }, 1000); // 1000ミリ秒（1秒）ごとに実行
        }

        // カウントダウンをリセットする関数
        function resetCountdown() {
            clearInterval(countdownTimer); // 進行中のタイマーを停止
            countdownSeconds = 60; // 秒数を初期値（60秒）にリセット
            document.getElementById('countdownDisplay').textContent = "60 秒残り"; // 表示をリセット
        }
    </script>
</head>
<body>

    <h1>カウントダウンタイマーを作成する方法</h1>

    <div class="timer" id="countdownDisplay">60 秒残り</div>

    <button onclick="startCountdown()">開始</button>
    <button onclick="resetCountdown()">リセット</button>

</body>
</html>