• 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
    获取服务器端时间的方法,这样的话,只要服务器端时间正确,客户端的系统时间不会影响倒计时,但因为要获取服务器时间,所以页面要放到服务器上才能验证哦~代码如下:
      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
  • 相关阅读:
    记一次Emotet木马处理案例
    CMake 学习资料
    GitHub 无法重置密码,提示:That address is either invalid, not a verified primary email or is not associated with a personal user account. Organization billing emails are only for notifications
    macOS 安装 Homebrew 报错:Failed to connect to raw.githubusercontent.com port 443: Connection refused
    Node.js精进(7)——日志
    Node.js精进(6)——文件
    Node.js精进(5)——HTTP
    数字孪生 3D 风电场,智慧风电之海上风电
    智慧风电:数字孪生 3D 风机智能设备运维
    一个快速切换一个底层实现的思路分享
  • 原文地址:https://www.cnblogs.com/stone5/p/9037348.html
Copyright © 2020-2023  润新知