js获取客户时间倒计时，js获取服务器端时间倒计时

时间：2022-04-23 07:49:19

Hello, everyone!我将这个博客作为自己的前端技术笔记，以后要将在这里分享自己的学习心得、转载好的文章js获取客户时间倒计时，js获取服务器端时间倒计时今天开始第一篇笔记，哈哈！

js实现时间倒计时显示。今天学习到了两种方法倒计时：1、从客户端获取时间倒计时；2、从服务器端获取时间倒计时。

这是一个很小的js的demo，从客户端获取时间思路简单、明了，但是弊端在于，它获取的是用户系统的时间，如果用户系统时间不对，倒计时也就千差万别了，所以我觉得不完美，代码如下：

距离春节还有<span id="span" style="font-size:30px;"></span>
<script>
  var oSpan = document.getElementById('span');
  function myTime(){
      var Time1 = new Date();                 //当前时间
      var Time2 = new Date(2016,1,7,24,0,0);  //倒计时时间
      var t = Math.floor((Time2 - Time1)/1000);
      // 天：Math.floor(t/86400)
      // 时：Math.floor(t%86400/3600)
      // 分：Math.floor(t%86400%3600/60)
      // 秒：t%60
      var str = Math.floor(t/86400)+'天'+toTwo(Math.floor(t%86400/3600))+'时'+toTwo(Math.floor(t%86400%3600/60))+'分'+toTwo(t%60)+'秒';
      oSpan.innerHTML = str;
  }
  
  myTime();
  
  function toTwo(n){   //判断当'时分秒'为个位数时，需要前面加0，如01
     return n<10?'0'+n:''+n;  
  }
  
  setInterval(function(){
      myTime();
  },1000);
  </script>  -->  
    
<!--     <script type="text/javascript">
var xhr = new XMLHttpRequest();
if( !xhr ){
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("HEAD",location.href,true);
xhr.onreadystatechange=function(){
if( xhr.readyState == 4 && xhr.status == 200 ){
     alert(xhr.getResponseHeader("Date"));
}
}
xhr.send(null);
var Time1 = new Date();
  alert(Time1);
</script>
后面我又找了获取服务器端时间的方法，这样的话，只要服务器端时间正确，客户端的系统时间不会影响倒计时，但因为要获取服务器时间，所以页面要放到服务器上才能验证哦~代码如下： 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>服务器倒计时</title>
          <script type="text/javascript">
  get=function (id){return document.getElementById(id)}
  if(document.all){
      window.XMLHttpRequest=function(){
          var get=['Microsoft.XMLHTTP','Msxml2.XMLHTTP'];
      for(var i=0;i<get.length;i++){try{return new ActiveXObject(get[i])}catch(e){}};
      };
  }
  webDate=function(fn){
    var Htime=new XMLHttpRequest();
    Htime.onreadystatechange=function(){Htime.readyState==4&&(fn(new Date(Htime.getResponseHeader('Date'))))};
    Htime.open('HEAD', '/?_='+(-new Date));
    Htime.send(null);
  }
  window.time=new Date();
  targetTime=new Date();
  time2String=function (t){
      with(t)return [getFullYear(),'年'
        ,('0'+(getMonth()+1)).slice(-2),'月'
        ,('0'+getDate()).slice(-2),'日 '
        ,('0'+getHours()).slice(-2),': '
        ,('0'+getMinutes()).slice(-2),': '
        ,('0'+getSeconds()).slice(-2)].join('')
  }
  int2time=function (m){
    m-=(D=parseInt(m/86400000))*86400000;
    m-=(H=parseInt(m/3600000))*3600000;
    S=parseInt((m-=(M=parseInt(m/60000))*60000)/1000);
    return D+'天'+H+'小时'+M+'分'+S+'秒'
  }
  setInterval(function (){
    webDate(function (webTime){
      get('web').innerHTML=time2String(time=webTime);
    })
    get('locale').innerHTML=time2String(new Date);
    get('time').innerHTML=int2time(targetTime-time);
    if ((targetTime-time)<0) {
      get('time').innerHTML = 'Game Over';
    }
  },1000)
 </script> 
    </head>
    <body>
        设定时间：2016年1月31日0时0分0秒<br>
        服务器时间:<span id='web'>loading...</span><br>
        本地时间:<span id="locale">loading...</span><br>
        倒计时时间:<span id="time">loading...</span>
        <script type="text/javascript" charset="utf-8">
          targetTime=new Date(2016,1,31,00,00,00);
        </script>
    </body>
</html>
 哈哈， 技术博客分享，我已经成功的从0到1了，加油！

标签：

相关文章