如何用JS獲取服務(wù)器時(shí)間并實(shí)現倒計時(shí)？
本文介紹如何使用JS獲取服務(wù)器時(shí)間并實(shí)現倒計時(shí)。通過(guò)這篇文章，讀者可以學(xué)會(huì )：
使用XMLHttpRequest對象可以發(fā)起AJAX請求。代碼如下：
通過(guò)以上4個(gè)步驟，就可以實(shí)現用JS獲取服務(wù)器時(shí)間并實(shí)現倒計時(shí)了！
本文介紹了獲取服務(wù)器時(shí)間、轉換為本地時(shí)間、實(shí)現倒計時(shí)和顯示倒計時(shí)4個(gè)步驟。希望本文能對讀者有所幫助。
總結：
通過(guò)AJAX請求獲取服務(wù)器時(shí)間，將服務(wù)器時(shí)間轉為本地時(shí)間，使用setInterval()函數實(shí)現倒計時(shí)，將倒計時(shí)顯示在頁(yè)面上。以上4個(gè)步驟可以幫助我們實(shí)現用JS獲取服務(wù)器時(shí)間并實(shí)現倒計時(shí)。
1、獲取服務(wù)器時(shí)間
要獲取服務(wù)器時(shí)間，需要使用AJAX請求。AJAX是一種異步請求方式，可以在不刷新頁(yè)面的情況下與服務(wù)器通信。
const xhr = new XMLHttpRequest();xhr.open(GET, /getServerTime); xhr.onload = function() { if (xhr.status === 200) { const serverTime = xhr.responseText; // TODO: 處理服務(wù)器時(shí)間 } }; xhr.send();以上代碼會(huì )向服務(wù)器發(fā)起一個(gè)GET請求，路徑為“/getServerTime”。服務(wù)器收到請求后，會(huì )返回一個(gè)字符串類(lèi)型的當前時(shí)間。我們需要將這個(gè)字符串轉為JS的日期類(lèi)型。
2、轉換為本地時(shí)間
由于服務(wù)器位于不同的時(shí)區，我們需要將服務(wù)器時(shí)間轉為本地時(shí)間?？梢允褂肑S內置的Date對象來(lái)進(jìn)行轉換。代碼如下：
const serverTime = 2021-07-10 12:00:00;const date = new Date(serverTime); const localTime = date.getTime() + date.getTimezoneOffset() * 60 * 1000;
以上代碼將服務(wù)器時(shí)間轉為本地時(shí)間，并將結果保存在localTime變量中。getTimezoneOffset()函數返回的是當前時(shí)區與UTC時(shí)間的分鐘差值，需要將其轉為毫秒格式。
3、實(shí)現倒計時(shí)
有了本地時(shí)間，就可以使用setInterval()函數實(shí)現倒計時(shí)了。setInterval()函數用于循環(huán)執行一個(gè)函數。代碼如下：
const endTime = localTime + 60 * 1000; // 倒計時(shí)1分鐘setInterval(function() { const now = new Date().getTime(); const distance = endTime - now; const seconds = Math.floor((distance / 1000) % 60); const minutes = Math.floor((distance / (1000 * 60)) % 60); const hours = Math.floor((distance / (1000 * 60 * 60)) % 24); const days = Math.floor(distance / (1000 * 60 * 60 * 24)); // TODO: 更新倒計時(shí)顯示 }, 1000);以上代碼將endTime設為1分鐘后的時(shí)間，每秒鐘執行一次函數。在函數內部，計算當前時(shí)間與endTime的差值，并將差值轉為天、小時(shí)、分鐘和秒數。
4、顯示倒計時(shí)
最后一步是將倒計時(shí)顯示在頁(yè)面上?？梢酝ㄟ^(guò)JS操作DOM元素來(lái)實(shí)現。代碼如下：
const daysEl = document.getElementById(days);const hoursEl = document.getElementById(hours); const minutesEl = document.getElementById(minutes); const secondsEl = document.getElementById(seconds); function updateCountdown() { const now = new Date().getTime(); const distance = endTime - now; const seconds = Math.floor((distance / 1000) % 60); const minutes = Math.floor((distance / (1000 * 60)) % 60); const hours = Math.floor((distance / (1000 * 60 * 60)) % 24); const days = Math.floor(distance / (1000 * 60 * 60 * 24)); daysEl.innerText = days; hoursEl.innerText = hours; minutesEl.innerText = minutes; secondsEl.innerText = seconds; setInterval(updateCountdown, 1000);以上代碼將顯示倒計時(shí)的DOM元素分別保存在daysEl、hoursEl、minutesEl和secondsEl變量中。在updateCountdown()函數中更新這些元素的innerText即可。
