タイマー

HTML
Posted at 2025-03-10
timer.html
<!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;
            text-align: center;
            margin: 50px;
        }
        #timer {
            font-size: 5em; /* フォントサイズを大きく */
            font-weight: bold;
            color: #ff0000; /* 赤色で見やすく */
            margin: 30px 0;
        }
        input, button {
            font-size: 1.5em;
            padding: 10px 20px;
            margin: 10px;
        }
    </style>
</head>
<body>

    <h1>デジタルタイマー</h1>
    <label for="minutes">時間（分）:</label>
    <input type="number" id="minutes" min="0" value="1">
    <button onclick="startTimer()">スタート</button>
    <button onclick="stopTimer()">ストップ</button>
    <button onclick="resetTimer()">リセット</button>

    <div id="timer">00:00</div>

    <script>
        let countdown;
        let timeLeft = 0;
        let isRunning = false;

        function startTimer() {
            if (isRunning) return;
            clearInterval(countdown);
            let minutes = document.getElementById("minutes").value;
            if (timeLeft === 0) {
                timeLeft = minutes * 60;
            }
            isRunning = true;

            function updateDisplay() {
                let min = Math.floor(timeLeft / 60);
                let sec = timeLeft % 60;
                document.getElementById("timer").innerText = 
                    String(min).padStart(2, "0") + ":" + String(sec).padStart(2, "0");
            }

            updateDisplay();

            countdown = setInterval(() => {
                if (timeLeft > 0) {
                    timeLeft--;
                    updateDisplay();
                } else {
                    clearInterval(countdown);
                    document.getElementById("timer").innerText = "00:00";
                    alert("時間になりました！");
                    isRunning = false;
                }
            }, 1000);
        }

        function stopTimer() {
            clearInterval(countdown);
            isRunning = false;
        }

        function resetTimer() {
            clearInterval(countdown);
            isRunning = false;
            timeLeft = 0;
            document.getElementById("timer").innerText = "00:00";
        }
    </script>

</body>
</html>
You get articles that match your needs
You can efficiently read back useful information
You can use dark theme
What you can do with signing up