JS實現無刷新倒計時

y637 9年前發布 | 2K 次閱讀 JavaScript 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
        <title>Document</title>  
        <script>  
            window.onload=function(){  
                function Timeover(){  
                    var timer=null;//定義定時器對象  
                    var oparenttime=document.getElementsByClassName("liktimer")[0]; //獲取對象  
                    var endtime="4/23/2017 15:16:59"  //定義結束時間  
                    var endtimer=new Date(endtime).getTime();  
                    var startimer=new Date().getTime();  
                    var opactiontimer=endtimer-startimer;  
                    var second=opactiontimer/1000;//獲取總的秒  
                    var Minute=Math.floor(second/60);//獲取總的分  
                  var houre=Math.floor(Minute/60);//獲取總的小時   
                var day=Math.floor(houre/24);//獲取總的天數  
                var houres=Math.floor(houre%24);//獲取顯示的小時  
                var Minutes=Math.floor(Minute%60);//獲取顯示的分  
                var seconds=Math.floor(second%60);//獲取顯示的秒  
                document.getElementsByClassName("RemainD")[0].innerHTML=day;  
                document.getElementsByClassName("RemainH")[0].innerHTML=houres;  
                document.getElementsByClassName("RemainM")[0].innerHTML=Minutes;  
                document.getElementsByClassName("RemainS")[0].innerHTML=seconds;  
                if(startimer>endtimer){ //如果當下的時間大于了過期時間，關閉定時器  
                  clearInterval(timer);  
                  oparenttime.innerHTML="";  
                  oparenttime.innerHTML="倒計時已經結束";  
                }  
            }  
            function loop(){  
                Timeover();  
                timer=setInterval(Timeover,1000);  
            }  
            loop();//消除帥新等待1秒倒計時的bug  
      }  
    </script>  
</head>  
<body>  
    <div class="liktimer">  
         <strong class="RemainD"></strong>天  
         <strong class="RemainH"></strong> 時  
         <strong class="RemainM"></strong>分  
         <strong class="RemainS"></strong>秒  
    </div>  
</body>  
</html>

 本文由用戶 y637 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！