js解决服务器和客户端存在时间差的问题

迈不过友情╰ 2022-06-07 01:26 315阅读 0赞

**在网页上做倒计时的功能，发现服务器和客户端存在时间差。下面讲解消除时间差的方法。**

原理：向服务器请求数据的时候，服务器返回一个服务器时间的变量server\_time，客户端获取本地的时间client\_time，两者相减得到相差的             时间，将该值加入本地时间差里面。

部分html如下：（显示倒计时的界面）

<p id='countdownTxt'>摇红包倒计时</p>
     <p id='timeContent'></p>

js如下：

$(function(){
    
       var time_distance = 0;
       requestRedbags();
       // 向后台请求数据： 
       function requestRedbags(){
         var url = '填写实际的url'; 
         data = { //填写实际的请求参数 }; 
         // 向服务器请求数据 
         request(url, data, function(response) { 
             var servie_time = new Date(datas.current_time.replace(/-/g,'/')); //将服务器返回的时间数据格式1992-09-12 10:22换成如1992/09/12 10:22 ，因为在safari下日期格式只能识别第二种 
             var local_time = new Date();
             time_distance = local_time.getTime() - servie_time.getTime(); //服务器和用户的时间相差的毫秒数 
             var start_time = response.data.start_time; 
             startCount(start_time); 
         }); 
      }
    //倒计时函数： 
    function startCount(startTime) { 
          var endTime = new Date(startTime.replace(/-/g,'/')); //改变日期格式为1992/03/12 23:00，因为safari只能是被这种格式 
          var countTimer = setInterval( function() { 
          var nowTime = new Date();
          var time = endTime.getTime() - nowTime.getTime() + time_distance; //截止时间和开始时间相差的毫秒数
          if (!isNaN(time) && time >= 0) {
               var day = parseInt(time / 1000 / 60 / 60 / 24); 
               var hour = parseInt(time / 1000 / 60 / 60 % 24); 
               var minute = parseInt(time / 1000 / 60 % 60);
               var second = parseInt(time / 1000 % 60); 
              if (time == 0) { 
                  current_redbag.status = "1";
                  refreshView(current_redbag,false); 
              }else if (time <= 10000) {
                  // 调用10秒倒计时动画 
                 $('#timeContent').text( second + '秒' ); 
              } else if (time <= 120000) { 
                 // 倒数120秒的时候
                 var secondLeft = minute * 60 + second; 
                 $('#timeContent').text( secondLeft + '秒'); 
             } else { 
                   $('#timeContent').text( day + '天' + hour + '小时' + minute + '分钟' + second + '秒'); } 
            } else if (time < 0) { clearInterval(countTimer); } }, 1000 ); }});