js解決伺服器和客戶端存在時間差的問題
阿新 • • 發佈:2019-02-10
在網頁上做倒計時的功能,發現伺服器和客戶端存在時間差。下面講解消除時間差的方法。
原理:向伺服器請求資料的時候,伺服器返回一個伺服器時間的變數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 ); }});