无刷新倒计时实现

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

posted @ 2014-05-07 13:32  独孤残情  阅读(145)  评论(0编辑  收藏  举报