>[success] # 倒計時搶購案例 ~~~ 1.獲取服務器時間可以從任意接口或者資源中的響應頭Date 獲取如圖 ~~~  ~~~ /* * 兩個時間： * + 目標時間 18:00:00 * + 當前時間 * 目標時間-當前時間=時間差 「毫秒差：計算時間差中包含多少小時，多少分鐘，多少秒」 * 每間隔一秒中都需要重新獲取當前時間「定時器 setInterval」，重算時間差等 * * 核心的問題： * 當前時間是不可以獲取客戶端本地的（因為本地的時間客戶自己可以肆意的修改），需要統一獲取服務器的時間「響應頭->Date」 * + 獲取服務器時間會存在時間偏差問題 --> HEAD AJAX狀態碼為2 * * 在頁面不刷新的情況下，每間隔1秒，不是再次從服務器獲取（如果這樣：服務器會崩潰，用戶得到的時間誤差也會越大...），而是基于第一次獲取的結果之上，手動給其累加1000ms即可 */ let countdownModule = (function () { let textBox = document.querySelector('.text'), serverTime = 0, targetTime = +new Date('2020/12/05 16:00:00'), timer = null; // 獲取服務器時間 const queryServerTime = function queryServerTime() { return new Promise(resolve => { let xhr = new XMLHttpRequest; xhr.open('HEAD', '/'); xhr.onreadystatechange = () => { if ((xhr.status >= 200 && xhr.status < 300) && xhr.readyState === 2) { let time = xhr.getResponseHeader('Date'); // 獲取的時間是格林尼治時間 -> 變為北京時間 resolve(+new Date(time)); } }; xhr.send(null); }); }; // 倒計時計算 const supplyZero = function supplyZero(val) { val = +val || 0; return val < 10 ? `0${val}` : val; }; const computed = function computed() { let diff = targetTime - serverTime, hours = 0, minutes = 0, seconds = 0; if (diff <= 0) { // 到達搶購時間了 textBox.innerHTML = '00:00:00'; clearInterval(timer); return; } // 沒到時間則計算即可 hours = Math.floor(diff / (1000 * 60 * 60)); diff = diff - hours * 1000 * 60 * 60; minutes = Math.floor(diff / (1000 * 60)); diff = diff - minutes * 1000 * 60; seconds = Math.floor(diff / 1000); textBox.innerHTML = `${supplyZero(hours)}:${supplyZero(minutes)}:${supplyZero(seconds)}`; }; return { async init() { serverTime = await queryServerTime(); computed(); // 設置定時器 timer = setInterval(() => { serverTime += 1000; computed(); }, 1000); } }; })(); countdownModule.init(); ~~~