本文將介紹使用JS倒計時(shí)獲取服務(wù)器時(shí)間，精準掌握時(shí)間并實(shí)時(shí)更新倒計時(shí)的方法。

　　

1、獲取服務(wù)器時(shí)間

在前端頁(yè)面中，我們常常需要獲取服務(wù)器時(shí)間來(lái)進(jìn)行相關(guān)的計算。有一種常見(jiàn)的做法是使用AJAX技術(shù)，通過(guò)向服務(wù)器發(fā)送請求獲取當前時(shí)間。但是，這種方法可能存在一些問(wèn)題，比如網(wǎng)絡(luò )延遲導致的時(shí)間誤差。另外，如果用戶(hù)頻繁刷新頁(yè)面，也會(huì )給服務(wù)器帶來(lái)不必要的壓力。

 

　　另一種更加穩妥的方法是，在服務(wù)器端生成一個(gè)時(shí)間戳，并將其存儲在前端頁(yè)面中。當頁(yè)面加載時(shí)，JS腳本通過(guò)讀取這個(gè)時(shí)間戳獲取服務(wù)器時(shí)間。這種方法可以避免網(wǎng)絡(luò )延遲導致的誤差，并且不會(huì )對服務(wù)器造成額外的壓力。

　　我們可以使用PHP來(lái)生成時(shí)間戳，并在前端頁(yè)面中使用JS讀?。?/p>

　　

<?php$time = time();

 

　　echo "<script>var serverTime={$time};</script>";

　　?>

在前端頁(yè)面中，可以通過(guò)以下代碼獲取服務(wù)器時(shí)間：

 

　　

var serverTime = new Date(serverTime * 1000);

2、倒計時(shí)實(shí)現

倒計時(shí)是JS應用的常見(jiàn)場(chǎng)景之一。在前端頁(yè)面中，我們通常會(huì )設置一個(gè)截止時(shí)間點(diǎn)，并根據當前時(shí)間與截止時(shí)間點(diǎn)之間的時(shí)間差來(lái)實(shí)現倒計時(shí)?？梢杂靡韵麓a實(shí)現：

 

　　

function countdown(endTime) { var remainingTime = new Date(endTime - serverTime);

 

　　 // 計算剩余時(shí)間

　　 var days = Math.floor(remainingTime / 1000 / 60 / 60 / 24),

　　 hours = Math.floor((remainingTime / 1000 / 60 / 60) % 24),

　　 minutes = Math.floor((remainingTime / 1000 / 60) % 60),

　　 seconds = Math.floor((remainingTime / 1000) % 60);

　　 // 更新倒計時(shí)

　　 document.getElementById(days).innerHTML = days;

　　 document.getElementById(hours).innerHTML = hours;

　　 document.getElementById(minutes).innerHTML = minutes;

　　 document.getElementById(seconds).innerHTML = seconds;

　　 // 每隔1秒更新一次倒計時(shí)

　　 setTimeout(function() {

　　 countdown(endTime);

　　 }, 1000);

　　countdown(new Date(2021/12/31)); // 設置截止時(shí)間

在頁(yè)面中需要設置相應的HTML元素來(lái)顯示倒計時(shí)：

 

　　

<div id="days"></div>天<div id="hours"></div>小時(shí)<div id="minutes"></div>分鐘<div id="seconds"></div>秒

3、精確掌握時(shí)間

在前面的例子中，我們已經(jīng)通過(guò)服務(wù)器時(shí)間獲取了準確的當前時(shí)間。但是，JS本身也可以提供一些API來(lái)獲取更加精確的時(shí)間。

 

　　使用window.performance.timing來(lái)獲取加載時(shí)間：

　　

var performanceTiming = window.performance.timing;var pageLoadTime = performanceTiming.loadEventEnd - performanceTiming.navigationStart;

使用Date.now()來(lái)獲取當前時(shí)間的時(shí)間戳：

 

　　

var timestamp = Date.now();

使用requestAnimationFrame()來(lái)獲取更加精確的時(shí)間，并避免setTimeout()和setInterval()的觸發(fā)時(shí)間誤差：

 

　　

var lastTimestamp;function loop(timestamp) {

 

　　 if (!lastTimestamp) {

　　 lastTimestamp = timestamp;

　　 }

　　 var elapsedTime = timestamp - lastTimestamp;

　　 // 在這里做一些具體的操作

　　 lastTimestamp = timestamp;

　　 requestAnimationFrame(loop);

　　requestAnimationFrame(loop);

4、實(shí)時(shí)更新倒計時(shí)

在前面的例子中，我們使用了setTimeout()來(lái)定時(shí)更新倒計時(shí)。但是，這種方法存在一些問(wèn)題，比如setTimeout()在后臺標簽頁(yè)中運行的速度可能會(huì )減慢。更好的方法是使用requestAnimationFrame()，它可以保證在頁(yè)面激活時(shí)按照60fps的速率運行。

 

　　這里我們將上面的倒計時(shí)例子進(jìn)行改進(jìn)：

　　

var remainingTime = null;function countdown(endTime) {

 

　　 if (!remainingTime) {

　　 remainingTime = new Date(endTime - serverTime);

　　 }

　　 // 計算剩余時(shí)間

　　 var days = Math.floor(remainingTime / 1000 / 60 / 60 / 24),

　　 hours = Math.floor((remainingTime / 1000 / 60 / 60) % 24),

　　 minutes = Math.floor((remainingTime / 1000 / 60) % 60),

　　 seconds = Math.floor((remainingTime / 1000) % 60);

　　 // 更新倒計時(shí)

　　 document.getElementById(days).innerHTML = days;

　　 document.getElementById(hours).innerHTML = hours;

　　 document.getElementById(minutes).innerHTML = minutes;

　　 document.getElementById(seconds).innerHTML = seconds;

　　 // 實(shí)時(shí)更新倒計時(shí)

　　 requestAnimationFrame(function() {

　　 remainingTime = new Date(endTime - serverTime);

　　 countdown(endTime);

　　 });

　　countdown(new Date(2021/12/31)); // 設置截止時(shí)間

本文介紹了如何使用JS倒計時(shí)獲取服務(wù)器時(shí)間，精準掌握時(shí)間并實(shí)時(shí)更新倒計時(shí)。首先，我們通過(guò)PHP在服務(wù)器端生成時(shí)間戳，并通過(guò)JS讀取時(shí)間戳獲取服務(wù)器時(shí)間。然后，我們實(shí)現了倒計時(shí)功能，根據當前時(shí)間與截止時(shí)間的時(shí)間差來(lái)計算倒計時(shí)。接著(zhù)，我們介紹了如何使用JS提供的API精確掌握時(shí)間。最后，我們使用requestAnimationFrame()來(lái)實(shí)時(shí)更新倒計時(shí)，避免setTimeout()可能存在的問(wèn)題。

 

　　總的來(lái)說(shuō)，JS倒計時(shí)獲取服務(wù)器時(shí)間是一個(gè)非常常見(jiàn)的場(chǎng)景，掌握了這個(gè)技能可以幫助我們更好的控制時(shí)間，并為用戶(hù)提供更加友好的交互體驗。

　　

上一篇：山東NTP時(shí)間服務(wù)器：精準時(shí)間同步，打造高效網(wǎng)絡(luò )。 下一篇：時(shí)間群組服務(wù)器端的新特性與優(yōu)化措施