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

html 复制代码
<!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>
相关推荐
zhu_zhu_xia2 分钟前
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示
javascript·3d·webgl
BillKu5 分钟前
Vue3父子组件数据同步方法
前端·javascript·vue.js
丶Darling.7 分钟前
26考研 | 王道 | 数据结构 | 第七章 查找
前端·数据结构·考研
七月丶28 分钟前
❌ 别再用接口文档开发了!我改用“Mock-First”后爽到飞起
前端·javascript·后端
綦枫Maple33 分钟前
Vue实战(08)解决 Vue 项目中路径别名 `@` 在 IDE 中报错无法识别的问题
前端·ide·vue.js
患得患失94933 分钟前
【前端】【业务场景】【面试】在前端开发中,如何实现文件的上传与下载功能,并且处理可能出现的错误情况?
前端
315356691334 分钟前
Optional 全解析:Java 最被低估的空值处理利器
java·前端·后端
七月丶34 分钟前
🗑 写了 2000 行代码,结果自己全删了。
前端·javascript·后端
SQ有空就喝水39 分钟前
Midscene 提示词工程实战:从入门到精通的 11 个核心技巧
前端·aigc·ai编程
Mike_jia39 分钟前
DBeaver插件开发与高级定制全指南:从入门到架构设计
前端