倒计时小实例（多次定时）

最新推荐文章于 2025-06-06 13:35:28 发布

weixin_30838921

最新推荐文章于 2025-06-06 13:35:28 发布

阅读量102

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vicii/p/6144704.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1{text-align:center;font-size:40px;}
    </style>
</head>
<body>
    <h1 id="number">
        <!-- 倒计时还有 01时01分01秒 -->
    </h1>
    <script>
        //设置倒计时的时间范围
        var seconds = 1000;

        //手工调用计时函数
        timeRun();

        //定时调用函数
        var timer = setInterval(timeRun, 1000);

        //倒计时函数
        function timeRun(){
            //获取 h1
            var h1 = document.getElementById('number');
            //判断
            if (seconds <= 0) {
                h1.innerHTML = "Game Over";
                h1.style.fontSize = "120px";
                clearInterval(timer);
                return;
            }
            //计算 秒数 里面包含的小时数
            var h = Math.floor(seconds / 3600);
            //计算剩下的秒数
            var s = seconds - h * 3600;
            //在从剩下的秒数中 取出 分钟
            var m = Math.floor(s / 60);
            //计算剩下的秒数
            s -= m * 60; 

            //处理数字 <10的数字前加0
            h = (h<10)?'0'+h:h;
            m = (m<10)?'0'+m:m;
            s = (s<10)?'0'+s:s;

            //拼接字符串
            var message = "倒计时还有 "+h+'时'+m+'分'+s+'秒';
            //把字符串输出到h1中
            h1.innerHTML = message;

            //秒数减少
            seconds --;
        }
    </script>
</body>
</html>