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