1. 程式人生 > >js解決伺服器和客戶端存在時間差的問題

js解決伺服器和客戶端存在時間差的問題

在網頁上做倒計時的功能,發現伺服器和客戶端存在時間差。下面講解消除時間差的方法。

原理:向伺服器請求資料的時候,伺服器返回一個伺服器時間的變數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 ); }});