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>

  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM