構建JavaScript倒計時時鐘有時是必要的，無論是活動、促銷還是遊戲。您可以使用原生JavaScript構建時鐘，而無需依賴任何插件。雖然有很多優秀的時鐘插件，但使用原生JavaScript具有以下優勢：
以下是如何用短短18行JavaScript代碼創建自己的倒計時時鐘：
欲深入了解JavaScript，請閱讀我們的書籍《JavaScript: Novice to Ninja, 2nd Edition》。
創建基本時鐘涉及以下步驟：
首先，您需要設置一個有效的結束日期。這應該是一個字符串，可以使用JavaScript的Date.parse()方法理解的任何格式。例如：
ISO 8601格式：
const deadline = '2015-12-31';
簡短格式：
const deadline = '31/12/2015';
或長格式：
const deadline = 'December 31 2015';
每種格式都允許您指定確切的時間和時區（或者在ISO日期的情況下指定與UTC的偏移量）。例如：
const deadline = 'December 31 2015 23:59:59 GMT+0200';
您可以在本文中閱讀更多關於JavaScript日期格式的信息。
下一步是計算剩餘時間。我們需要編寫一個函數，該函數接受表示給定結束時間（如上所述）的字符串。然後，我們計算該時間與當前時間之間的差值。如下所示：
const deadline = '2015-12-31';
首先，我們創建一個變量total來保存截止日期之前的剩餘時間。 Date.parse()函數將時間字符串轉換為以毫秒為單位的值。這允許我們從彼此中減去兩個時間並獲得兩者之間的時間量。
const deadline = '31/12/2015';
現在我們要將毫秒轉換為天、小時、分鐘和秒。讓我們以秒為例：
const deadline = 'December 31 2015';
讓我們分解一下這裡發生了什麼。
Math.floor( (t/1000) % 60 )重複此邏輯將毫秒轉換為分鐘、小時和天。
準備好天、小時、分鐘和秒後，我們現在可以將數據作為可重用的對象返回：
const deadline = 'December 31 2015 23:59:59 GMT+0200';
此對象允許您調用您的函數並獲取任何計算值。以下是如何獲取剩餘分鐘的示例：
function getTimeRemaining(endtime){
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor( (total/1000) % 60 );
const minutes = Math.floor( (total/1000/60) % 60 );
const hours = Math.floor( (total/(1000*60*60)) % 24 );
const days = Math.floor( total/(1000*60*60*24) );
return {
total,
days,
hours,
minutes,
seconds
};
}方便吧？
現在我們有一個函數可以輸出剩餘的天、小時、分鐘和秒，我們可以構建我們的時鐘。首先，我們將創建以下HTML元素來保存我們的時鐘：
const total = Date.parse(endtime) - Date.parse(new Date());
然後，我們將編寫一個函數，該函數將時鐘數據輸出到我們的新div中：
const seconds = Math.floor( (t/1000) % 60 );
此函數採用兩個參數。它們是包含我們時鐘的元素的id和倒計時的結束時間。在函數內部，我們將聲明一個clock變量並使用它來存儲對我們的時鐘容器div的引用。這意味著我們不必不斷查詢DOM。
接下來，我們將使用setInterval每秒執行一個匿名函數。此函數將執行以下操作：
此時，唯一剩下的步驟是運行時鐘，如下所示：
return {
total,
days,
hours,
minutes,
seconds
};恭喜！您現在只需18行JavaScript代碼即可擁有一個基本時鐘。
在設置時鐘樣式之前，我們需要稍微改進一下。
在時鐘中，我們使用setInterval每秒更新顯示。這在大多數情況下都沒問題，但在開始時，將有一秒鐘的延遲。要刪除此延遲，我們必須在間隔開始之前更新一次時鐘。
讓我們將傳遞給setInterval的匿名函數移到它自己的單獨函數中。我們可以將此函數命名為updateClock。在setInterval之外調用一次updateClock函數，然後在setInterval內部再次調用它。這樣，時鐘就會在沒有延遲的情況下顯示出來。
在您的JavaScript中，替換以下內容：
const deadline = '2015-12-31';
使用以下內容：
const deadline = '31/12/2015';
我們需要使時鐘腳本更高效。我們希望只更新時鐘中的數字，而不是每秒重建整個時鐘。實現此目的的一種方法是將每個數字放在一個<span>標籤內，並且只更新這些<span>的內容。
這是HTML：
const deadline = 'December 31 2015';
現在讓我們獲取對這些元素的引用。在定義clock變量之後添加以下代碼
const deadline = 'December 31 2015 23:59:59 GMT+0200';
接下來，我們需要更改updateClock函數以僅更新數字。新代碼將如下所示：
function getTimeRemaining(endtime){
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor( (total/1000) % 60 );
const minutes = Math.floor( (total/1000/60) % 60 );
const hours = Math.floor( (total/(1000*60*60)) % 24 );
const days = Math.floor( total/(1000*60*60*24) );
return {
total,
days,
hours,
minutes,
seconds
};
}現在時鐘不再每秒重建，我們還有一件事要做：添加前導零。例如，時鐘不會顯示7秒，而是顯示07秒。一種簡單的方法是在數字的開頭添加一個“0”字符串，然後切掉最後兩位數字。
例如，要向“seconds”值添加前導零，您將更改以下內容：
const total = Date.parse(endtime) - Date.parse(new Date());
為此：
const seconds = Math.floor( (t/1000) % 60 );
如果您願意，也可以向分鐘和小時添加前導零。如果您走到這一步，恭喜！您的時鐘現在可以顯示了。
注意：您可能需要在CodePen中單擊“重新運行”才能啟動倒計時。
以下示例演示瞭如何針對某些用例擴展時鐘。它們都基於上面看到的基本示例。
假設我們希望時鐘在某些日子顯示，而在其他日子不顯示。例如，我們可能有一系列即將到來的活動，並且不想每次都手動更新時鐘。以下是如何提前安排事情。
通過將時鐘的display屬性設置為none來隱藏時鐘。然後將以下內容添加到initializeClock函數（在以var clock開頭的行之後）。這將導致時鐘僅在調用initializeClock函數後顯示：
return {
total,
days,
hours,
minutes,
seconds
};接下來，我們可以指定時鐘應該顯示的日期範圍。這將替換deadline變量：
const deadline = '2015-12-31';
schedule數組中的每個元素都表示一個開始日期和一個結束日期。如上所述，可以包含時間和時區，但我在這裡使用普通日期以保持代碼的可讀性。
最後，當用戶加載頁面時，我們需要檢查我們是否在任何指定的時間範圍內。此代碼應替換之前對initializeClock函數的調用。
const deadline = '31/12/2015';
現在，您可以提前安排時鐘，而無需手動更新它。您可以根據需要縮短代碼。為了可讀性，我使我的代碼冗長。
可能需要在用戶到達或開始特定任務後為給定時間量設置倒計時。我們將在這裡設置一個10分鐘的計時器，但您可以使用任何您想要的時間量。
我們只需要用以下內容替換deadline變量：
const deadline = 'December 31 2015';
此代碼獲取當前時間並添加十分鐘。值轉換為毫秒，因此可以將它們加在一起並轉換為新的截止日期。
現在我們有一個時鐘，它從用戶到達時開始倒計時十分鐘。隨意嘗試不同的時間長度。
有時需要保存時鐘的狀態，而不僅僅是當前頁面。如果我們想在整個網站上設置一個10分鐘的計時器，我們不希望它在用戶轉到不同的頁面時重置。
一種解決方案是將時鐘的結束時間保存在cookie中。這樣，導航到新頁面就不會將結束時間重置為從現在起十分鐘。
這是邏輯：
要實現這一點，請用以下內容替換deadline變量：
const deadline = 'December 31 2015 23:59:59 GMT+0200';
此代碼使用了cookie和正則表達式，兩者都是各自的單獨主題。因此，我不會在這裡詳細介紹。需要注意的一點是，您需要將.yourdomain.com更改為您實際的域名。
JavaScript日期和時間取自用戶的計算機。這意味著用戶可以通過更改其計算機上的時間來影響JavaScript時鐘。在大多數情況下，這無關緊要。但在某些極其敏感的情況下，需要從服務器獲取時間。這可以使用一些PHP或Ajax來完成，這超出了本教程的範圍。
從服務器獲取時間後，我們可以使用本教程中的相同技術來處理它。
在完成本文中的示例後，您現在知道如何僅使用少量原生JavaScript代碼創建自己的倒計時計時器！我們已經了解瞭如何製作基本的倒計時時鐘並高效地顯示它。我們還介紹了一些有用的附加功能，包括調度、絕對時間與相對時間以及使用cookie在頁面和網站訪問之間保存狀態。
嘗試使用您的時鐘代碼。嘗試添加一些創意樣式或新功能（例如暫停和恢復按鈕）。之後，如果您想分享任何很酷的時鐘示例，請在論壇上告訴我們。
如何在JavaScript中獲取當前日期和時間？您可以使用Date對象獲取當前日期和時間。只需創建一個沒有參數的Date的新實例，它將表示當前日期和時間。
JavaScript中常見的日期和時間操作有哪些？常見的操作包括格式化日期、解析日期字符串、計算時間間隔、添加或減去時間以及比較日期。
在JavaScript中處理時區的推薦方法是什麼？最好盡可能使用UTC時間來避免時區問題。當向用戶顯示時間時，請考慮使用toLocaleString方法以及使用timeZone選項指定所需的時區。
如何在JavaScript中計算兩個日期之間的差值？您可以減去兩個Date對像以獲得以毫秒為單位的時間間隔，然後使用數學運算將其轉換為天、小時、分鐘等。
我可以在JavaScript中輕鬆操作日期嗎？是的，JavaScript提供了一些方法來向日期添加和減去時間間隔。 Date對象具有setFullYear、setMonth、setDate等方法，用於日期操作。
以上是在僅18行JavaScript中構建倒計時計時器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
