t-5.倒计时(秒杀效果)--本地--服务器（待续）

　　　　

//01 倒计时（从客户端获取时间）   
      var mysetInterval=setInterval(function countTime(){
            //获取当前时间  
            var date = new Date();  
            var now = date.getTime();  
            //设置截止时间  
            var endDate = new Date("2018-5-14 18:36:00");  
            var end = endDate.getTime();  
            //时间差  
            var leftTime = end-now; 
            if(leftTime<=0){
                d=0;
                h=0;
                m=0;
                s=0;
                clearInterval(mysetInterval);
            }else{
                //定义变量 d,h,m,s保存倒计时的时间  
                var d,h,m,s;  
                if (leftTime>=0) {  
                    d = Math.floor(leftTime/1000/60/60/24);  
                    h = Math.floor(leftTime/1000/60/60%24);  
                    m = Math.floor(leftTime/1000/60%60);  
                    s = Math.floor(leftTime/1000%60);                     
                }
                    function checkTime(i){
                       if(i<10){
                          i="0"+i;
                       }
                          return i;
                    }
                    //将倒计时赋值到div中  
                    document.getElementById("d").innerHTML =checkTime(d);  
                    document.getElementById("h").innerHTML =checkTime(h);  
                    document.getElementById("m").innerHTML =checkTime(m);  
                    document.getElementById("s").innerHTML =checkTime(s);  
                }
                //递归每秒调用countTime方法，显示动态时间效果  
                // setTimeout(countTime,1000); 
                console.log("1"); //测试看程序是否会停止；       
            }
      ,1000);
 
02服务器端获取未完善有bug
获取服务器端时间的方法，这样的话，只要服务器端时间正确，客户端的系统时间不会影响倒计时，但因为要获取服务器时间，所以页面要放到服务器上才能验证哦~代码如下：
[html] view plain copy
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3.     <head>  
    4.         <meta charset="utf-8">  
    5.         <title>服务器倒计时</title>  
    6.           <script type="text/javascript">  
    7.   get=function (id){return document.getElementById(id)}  
    8.   if(document.all){  
    9.       window.XMLHttpRequest=function(){  
    10.           var get=['Microsoft.XMLHTTP','Msxml2.XMLHTTP'];  
    11.       for(var i=0;i<get.length;i++){try{return new ActiveXObject(get[i])}catch(e){}};  
    12.       };  
    13.   }  
    14.   webDate=function(fn){  
    15.     var Htime=new XMLHttpRequest();  
    16.     Htime.onreadystatechange=function(){Htime.readyState==4&&(fn(new Date(Htime.getResponseHeader('Date'))))};  
    17.     Htime.open('HEAD', '/?_='+(-new Date));  
    18.     Htime.send(null);  
    19.   }  
    20.   window.time=new Date();  
    21.   targetTime=new Date();  
    22.   time2String=function (t){  
    23.       with(t)return [getFullYear(),'年'  
    24.         ,('0'+(getMonth()+1)).slice(-2),'月'  
    25.         ,('0'+getDate()).slice(-2),'日 '  
    26.         ,('0'+getHours()).slice(-2),': '  
    27.         ,('0'+getMinutes()).slice(-2),': '  
    28.         ,('0'+getSeconds()).slice(-2)].join('')  
    29.   }  
    30.   int2time=function (m){  
    31.     m-=(D=parseInt(m/86400000))*86400000;  
    32.     m-=(H=parseInt(m/3600000))*3600000;  
    33.     S=parseInt((m-=(M=parseInt(m/60000))*60000)/1000);  
    34.     return D+'天'+H+'小时'+M+'分'+S+'秒'  
    35.   }  
    36.   setInterval(function (){  
    37.     webDate(function (webTime){  
    38.       get('web').innerHTML=time2String(time=webTime);  
    39.     })  
    40.     get('locale').innerHTML=time2String(new Date);  
    41.     get('time').innerHTML=int2time(targetTime-time);  
    42.     if ((targetTime-time)<0) {  
    43.       get('time').innerHTML = 'Game Over';  
    44.     }  
    45.   },1000)  
    46.  </script>   
    47.     </head>  
    48.     <body>  
    49.         设定时间：2016年1月31日0时0分0秒<br>  
    50.         服务器时间:<span id='web'>loading...</span><br>  
    51.         本地时间:<span id="locale">loading...</span><br>  
    52.         倒计时时间:<span id="time">loading...</span>  
    53.         <script type="text/javascript" charset="utf-8">  
    54.           targetTime=new Date(2016,1,31,00,00,00);  
    55.         </script>  
    56.     </body>  
    57. </html> 
posted @ 2018-05-14 17:54  一叶知秋韵  阅读(98)  评论(0)    收藏  举报