当前位置：首页 > article >正文

HTML的自动定义倒计时，这个配色存一下

article 2024/11/23 8:40:36

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义倒计时</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
        }

        .container {
            text-align: center;
            background-color: rgba(0, 0, 0, 0.4);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .input-group {
            margin-bottom: 20px;
        }

        label {
            font-size: 1.2rem;
        }

        input[type="number"] {
            padding: 10px;
            font-size: 1rem;
            border: none;
            border-radius: 5px;
            margin: 5px;
            width: 60px;
            text-align: center;
        }

        .buttons {
            margin-top: 20px;
        }

        button {
            background-color: #ff7e5f;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 1.1rem;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #feb47b;
        }

        .countdown-display {
            margin-top: 30px;
            font-size: 3rem;
            font-weight: bold;
        }

        .countdown-finished {
            color: #fffa65;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>倒计时</h1>
        <div class="input-group">
            
            <input type="number" id="hours" min="0" max="23" value="0">
            <label for="hours">小时</label>
            
            <input type="number" id="minutes" min="0" max="59" value="0">
            <label for="minutes">分钟</label>
           
            <input type="number" id="seconds" min="0" max="59" value="0">
             <label for="seconds">秒</label>
        </div>
        <div class="buttons">
            <button onclick="startCountdown()">开始倒计时</button>
            <button onclick="pauseCountdown()">暂停</button>
            <button onclick="resetCountdown()">重置</button>
        </div>
        <div class="countdown-display" id="countdown-display">00:00:00</div>
    </div>

    <script>
        let countdownInterval;
        let totalSeconds;
        let isPaused = false;

        function startCountdown() {
            // 如果正在暂停，直接继续计时
            if (isPaused) {
                isPaused = false;
                countdownInterval = setInterval(updateCountdown, 1000);
                return;
            }

            const hours = parseInt(document.getElementById('hours').value, 10);
            const minutes = parseInt(document.getElementById('minutes').value, 10);
            const seconds = parseInt(document.getElementById('seconds').value, 10);

            totalSeconds = hours * 3600 + minutes * 60 + seconds;

            if (totalSeconds > 0) {
                clearInterval(countdownInterval);
                countdownInterval = setInterval(updateCountdown, 1000);
            }
        }

        function updateCountdown() {
            if (totalSeconds > 0) {
                totalSeconds--;
                const hrs = Math.floor(totalSeconds / 3600);
                const mins = Math.floor((totalSeconds % 3600) / 60);
                const secs = totalSeconds % 60;

                document.getElementById('countdown-display').textContent =
                    `${formatTime(hrs)}:${formatTime(mins)}:${formatTime(secs)}`;
            } else {
                clearInterval(countdownInterval);
                document.getElementById('countdown-display').textContent = "倒计时结束";
                document.getElementById('countdown-display').classList.add('countdown-finished');
            }
        }

        function formatTime(time) {
            return time < 10 ? `0${time}` : time;
        }

        function resetCountdown() {
            clearInterval(countdownInterval);
            document.getElementById('countdown-display').textContent = "00:00:00";
            document.getElementById('hours').value = 0;
            document.getElementById('minutes').value = 0;
            document.getElementById('seconds').value = 0;
            document.getElementById('countdown-display').classList.remove('countdown-finished');
            isPaused = false;  // 重置暂停状态
        }

        function pauseCountdown() {
            if (!isPaused) {
                clearInterval(countdownInterval);
                isPaused = true;
            } else {
                startCountdown();
            }
        }
    </script>
</body>
</html>