JavaScript实现两小时倒计时

【构思】

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

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

【步骤】

　　

<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>

　　

　　

posted @ 2018-08-28 09:41  。思索  阅读(4650)  评论(6)  编辑  收藏  举报