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

最新推荐文章于 2024-12-13 15:03:57 发布

赏花赏景赏时光

最新推荐文章于 2024-12-13 15:03:57 发布

阅读量7.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：解决服务器和客户端存在时间差问题

本文链接：https://blog.youkuaiyun.com/tangxiujiang/article/details/78154865

js 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了一种网页倒计时功能中解决服务器与客户端时间差的方法。通过获取服务器时间并调整客户端时间来确保倒计时准确性。适用于需要精确倒计时的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

原理：向服务器请求数据的时候，服务器返回一个服务器时间的变量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 ); }});