JavaScript实现两小时倒计时

2024-08-16 09:29:17 浏览数 (3)

【构思】

  因为只需要的是两小时,所以时间直接写死,然后通过setInterval每1000ms对时间进行减1操作

  前期未考虑到当时分秒小于10的状态,所以后面又加上了一个checkTime()来进行限制,小时则直接在变量中加了。

【步骤】

代码语言:javascript复制
<html>
    <head>
        <title>2小时倒计时</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .cutDown{
                width: 100%;
                height: 100%;
                background: url(2.jpg) no-repeat;
                background-size: 100%;
                text-align: center;
                color: #fff;
                font-size: 80px;
                font-weight: 100;
                font-family: monospace;
                position: absolute;
                bottom: 0px;
            }
        </style>
    </head>
    <body >
        <div id="time" class="cutDown"></div>
        <script>
        window.onload = function(){
            var time = {
                init: function() {
                    var oTime=document.getElementById("time");
                    var h='0'   1;
                    var m=59;
                    var s=59;
                    oTime.innerHTML="02 : 00 : 00";

                    //进行倒计时显示
                    var time = setInterval(function(){
                        --s;
                        if(s<0){
                            --m;
                            s=59;
                        }
                        if(m<0){
                            --h;
                            m=59
                        }
                        if(h<0){
                            s=0;
                            m=0;
                        }
                    // 判断当时分秒小于10时补0
                        function checkTime(i){
                            if (i < 10) {
                                i = '0'   i
                            }
                            return i;
                        }
                        s = checkTime(s);
                        m = checkTime(m);
                        oTime.innerHTML=h " : " m " : " s;
                    },1000);
                }
            }
            time.init();
        }
        </script>
    </body>
</html>

0 人点赞