在线倒计时器

在线倒计时器设计

我将设计一个美观且功能完整的在线倒计时器，用户可以设置时间并开始倒计时，体验流畅的动画效果。

设计思路

简洁现代的用户界面
方便的时间设置（分钟/秒）
清晰的倒计时显示
直观的控制按钮（开始/暂停/重置）
结束时视觉和声音提醒
响应式设计适应不同设备

下面是完整的实现代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线倒计时器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            padding: 20px;
        }

        .container {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            padding: 40px;
            width: 100%;
            max-width: 500px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        h1 {
            color: white;
            margin-bottom: 30px;
            font-size: 2.5rem;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .timer-display {
            font-size: 5rem;
            font-weight: 700;
            color: white;
            margin: 30px 0;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            font-variant-numeric: tabular-nums;
            transition: all 0.3s ease;
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 20px 0;
        }

        button {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50px;
            color: white;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            padding: 12px 25px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-3px);
        }

        button:active {
            transform: translateY(1px);
        }

        #start-btn {
            background: rgba(46, 204, 113, 0.8);
        }

        #pause-btn {
            background: rgba(241, 196, 15, 0.8);
        }

        #reset-btn {
            background: rgba(231, 76, 60, 0.8);
        }

        .time-inputs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 25px;
        }

        .input-group {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .input-group label {
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 8px;
            font-size: 0.9rem;
        }

        .input-group input {
            width: 100px;
            padding: 12px;
            border-radius: 10px;
            border: none;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 1.2rem;
            text-align: center;
            font-weight: bold;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type=number] {
            -moz-appearance: textfield;
        }

        .progress-wrapper {
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            margin: 30px 0;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
            width: 100%;
            transition: width 1s linear;
        }

        .message {
            color: white;
            font-size: 1.2rem;
            margin-top: 20px;
            min-height: 30px;
            opacity: 0.9;
        }

        .ended {
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        @media (max-width: 500px) {
            .container {
                padding: 30px 15px;
            }

            h1 {
                font-size: 2rem;
            }

            .timer-display {
                font-size: 3.5rem;
            }

            .controls {
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1><i class="fas fa-clock"></i> 在线倒计时器</h1>

        <div class="time-inputs">
            <div class="input-group">
                <label for="minutes">分钟</label>
                <input type="number" id="minutes" min="0" max="99" value="5">
            </div>

            <div class="input-group">
                <label for="seconds">秒钟</label>
                <input type="number" id="seconds" min="0" max="59" value="0">
            </div>
        </div>

        <div class="timer-display" id="display">05:00</div>

        <div class="controls">
            <button id="start-btn"><i class="fas fa-play"></i> 开始</button>
            <button id="pause-btn"><i class="fas fa-pause"></i> 暂停</button>
            <button id="reset-btn"><i class="fas fa-redo"></i> 重置</button>
        </div>

        <div class="progress-wrapper">
            <div class="progress-bar" id="progress"></div>
        </div>

        <div class="message" id="message">设置时间并点击开始</div>

        <audio id="alarm" src="https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3"></audio>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const minutesInput = document.getElementById('minutes');
            const secondsInput = document.getElementById('seconds');
            const display = document.getElementById('display');
            const startBtn = document.getElementById('start-btn');
            const pauseBtn = document.getElementById('pause-btn');
            const resetBtn = document.getElementById('reset-btn');
            const progressBar = document.getElementById('progress');
            const message = document.getElementById('message');
            const alarm = document.getElementById('alarm');

            let countdown;
            let totalSeconds = 0;
            let remainingTime = 0;
            let isPaused = true;
            let isRunning = false;

            // 格式化时间为MM:SS
            function formatTime(seconds) {
                const mins = Math.floor(seconds / 60);
                const secs = seconds % 60;
                return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
            }

            // 更新显示
            function updateDisplay() {
                display.textContent = formatTime(remainingTime);

                // 更新进度条
                if (totalSeconds > 0) {
                    const percent = (remainingTime / totalSeconds) * 100;
                    progressBar.style.width = `${percent}%`;
                }

                // 最后10秒添加动画效果
                if (remainingTime <= 10 && remainingTime > 0) {
                    display.classList.add('ended');
                    message.textContent = `倒计时即将结束！`;
                } else {
                    display.classList.remove('ended');
                }
            }

            // 开始倒计时
            function startTimer() {
                if (!isRunning) {
                    // 获取输入的时间
                    const minutes = parseInt(minutesInput.value) || 0;
                    const seconds = parseInt(secondsInput.value) || 0;

                    totalSeconds = minutes * 60 + seconds;
                    remainingTime = totalSeconds;

                    if (totalSeconds <= 0) {
                        message.textContent = "请设置有效时间";
                        return;
                    }

                    isRunning = true;
                    isPaused = false;
                    message.textContent = "倒计时进行中...";
                } else if (isPaused) {
                    isPaused = false;
                    message.textContent = "倒计时进行中...";
                }

                startBtn.innerHTML = '<i class="fas fa-play"></i> 继续';

                // 开始计时器
                clearInterval(countdown);
                countdown = setInterval(() => {
                    if (!isPaused) {
                        remainingTime--;
                        updateDisplay();

                        if (remainingTime <= 0) {
                            clearInterval(countdown);
                            timerEnded();
                        }
                    }
                }, 1000);
            }

            // 暂停倒计时
            function pauseTimer() {
                if (!isRunning) return;

                isPaused = !isPaused;
                pauseBtn.innerHTML = isPaused 
                    ? '<i class="fas fa-play"></i> 继续' 
                    : '<i class="fas fa-pause"></i> 暂停';

                message.textContent = isPaused ? "倒计时已暂停" : "倒计时进行中...";
            }

            // 重置倒计时
            function resetTimer() {
                clearInterval(countdown);
                minutesInput.value = 5;
                secondsInput.value = 0;
                remainingTime = 5 * 60;
                totalSeconds = 5 * 60;
                isRunning = false;
                isPaused = true;
                startBtn.innerHTML = '<i class="fas fa-play"></i> 开始';
                pauseBtn.innerHTML = '<i class="fas fa-pause"></i> 暂停';
                message.textContent = "设置时间并点击开始";
                progressBar.style.width = "100%";
                display.classList.remove('ended');
                updateDisplay();
            }

            // 倒计时结束
            function timerEnded() {
                display.classList.add('ended');
                message.textContent = "时间到！倒计时结束！";

                // 播放提示音
                alarm.currentTime = 0;
                alarm.play();

                isRunning = false;
                isPaused = true;
                startBtn.innerHTML = '<i class="fas fa-play"></i> 开始';
            }

            // 事件监听
            startBtn.addEventListener('click', startTimer);
            pauseBtn.addEventListener('click', pauseTimer);
            resetBtn.addEventListener('click', resetTimer);

            // 输入验证
            minutesInput.addEventListener('change', function() {
                let value = parseInt(this.value) || 0;
                if (value < 0) value = 0;
                if (value > 99) value = 99;
                this.value = value;

                if (!isRunning) {
                    remainingTime = value * 60 + (parseInt(secondsInput.value) || 0);
                    updateDisplay();
                }
            });

            secondsInput.addEventListener('change', function() {
                let value = parseInt(this.value) || 0;
                if (value < 0) value = 0;
                if (value > 59) value = 59;
                this.value = value;

                if (!isRunning) {
                    remainingTime = (parseInt(minutesInput.value) || 0) * 60 + value;
                    updateDisplay();
                }
            });

            // 初始化显示
            resetTimer();
        });
    </script>
</body>
</html>