JS实现无刷新倒计时

2018-07-20 来源：open-open

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

上一篇:通用的Java DAO类

下一篇: js 自动补全

最新资讯

热门推荐