如何使用 Vanilla JavaScript 構建日期倒計時
簡介
倒計時計時器是一個虛擬時鐘，它從特定日期開始（或停止）倒計時，以標記事件的開始（或結束）。它們通常用於電子商務網站的著陸頁、建設中的網站、活動頁面以及各種其他地方。
它們通常用於生日、新年倒計時、促銷活動，甚至運動。倒計時的主要目的是鼓勵人們採取行動 ，以免為時已晚 - 例如購買物品或服務、預測和註冊活動等等。
本質上，我們會提前預訂某個日期。然後，使用 JavaScript，我們可以從指定的日期中減去當前日期，這是每秒、每分鐘或每小時執行一次。
注意： 該應用程序的源代碼也可以在 GitHub 上找到。
使用 JavaScript 構建日期倒計時
建議您了解如何僅使用 JavaScript 而不是預先剪切的解決方案或插件來創建倒數計時器，除非您需要添加一些更具體的功能，這些功能最好通過庫而不是從頭開始處理。
因為它沒有依賴項，所以使用 Vanilla JavaScript 構建它可以讓您擁有輕量級代碼 - 您的網站不會額外增加負擔，並且您不需要加載外部腳本和样式表。您將擁有更大的控制權，這意味著您將能夠設計計時器以使其按照您的意願準確運行和顯示，而不是試圖讓插件屈從於您的意願。
開始使用
讓我們設置一個目標日期，它將作為活動日 我們正在創建一個倒計時。您還可以根據參數動態創建此日期，例如為用戶創建倒計時以驗證其電子郵件地址。
為簡潔起見，我們將設置一個靜態日期：
let interval;
const eventDay = new Date('03/03/2022');
注意： Date 構造函數接受 (MM/DD/YYYY) 格式的日期。我們還有一個空白的 interval 供以後分配。
讓我們也設置幾個常量值。通常，處理時間（以秒為單位）在 毫秒 內完成 ，並且大多數方法/命令接受並返回 毫秒 價值觀。
基於此，讓我們定義一個 second 的持續時間 , minute , hour 和 day ，因此我們可以在需要時使用它們進行倒計時：
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
創建倒計時函數
現在進入邏輯核心——倒計時功能！
const countDownFn = () => {
// All logic goes in
}
根據您希望計時器更新的頻率 - 每秒、每分鐘或每小時，您將使用適當的 intervals 調用該函數 ：
everySecond = setInterval(countDownFn, second)
everyMinute = setInterval(countDownFn, minute)
everyHour = setInterval(countDownFn, hour)
現在，讓我們獲取當前日期，然後從 eventDay 中減去它 （將來）以便了解它們之間的區別。然後，基於這個差異，我們將知道熱的多天、小時、分鐘和秒：
let now = new Date();
let timeSpan = eventDay - now;
注意： 為當前時間放置實例很重要（now ) 在倒計時功能中，因為“當前時間”不斷變化。當我們調用函數更新計時器時，它會得到最新的時間。其次，我們使用的是 let 而不是 const, 因為值每秒都在變化。
最後，讓我們檢查一下活動日是否到了！一旦它達到零，就沒有必要再倒計時了。為此，我們將使用 if-elseif 聲明。
首先，讓我們實現 if 檢查用戶設置的事件日期是否已經過去的語句：
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
if (timeSpan <= -today) {
console.log("Unfortunately we have past the event day");
clearInterval(interval);
}
如果 timeSpan ，從 eventDay 中減去當前日期和時間的結果 小於或等於今天之後的任何時間 - 它是負數，或者更確切地說，是過去。
最後——讓我們檢查一下倒計時是否應該結束：
else if (timeSpan <= 0) {
console.log("Today is the event day");
clearInterval(interval);
return;
}
clearInterval() 函數清除間隔，因此不會在每個間隔（秒、分鐘等）上再次調用此邏輯。
最後，我們可以計算剩下的秒數、分鐘數、小時數和天數，如果前面的兩個檢查都評估為 false ：
else {
const days = Math.floor(timeSpan / day)
const hours = Math.floor((timeSpan % day) / hour)
const minutes = Math.floor((timeSpan % hour) / minute)
const seconds = Math.floor((timeSpan % minute) / second)
console.log(days + ":" + hours + ":" + minutes + ":" + seconds);
}
代替打印到控制台 - 讓我們構建一個簡單的 HTML 頁面來顯示結果！
HTML 頁面
讓我們構建一個小頁面來顯示結果。我們會想要某種元素，例如，day , 小時 , 分鐘 秒 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS Countdown Timer</title>
</head>
<body>
<div class="date-countdown-container">
<h2 id="day">0</h2>
<p>:</p>
<h2 id="hour">0</h2>
<p>:</p>
<h2 id="minute">0</h2>
<p>:</p>
<h2 id="second">0</h2>
</div>
<script src="./app.js"></script>
</body>
</html>
app.js 腳本包含所有代碼，包括 countDownFn() .現在，我們可以更改函數的輸出以不將值打印到控制台，而是更改 day , hour , minute 和 second div：
let dayField = document.getElementById('day');
let hourField = document.getElementById('hour');
let minuteField = document.getElementById('minute');
let secondField = document.getElementById('second');
// Constants and countDownFn
const countDownFn = () => {...}
// Set results
dayField.innerHTML = days;
hourField.innerHTML = hours;
minuteField.innerHTML = minutes;
secondField.innerHTML = seconds;
這應該工作得很好！然而，它並沒有真正的風格。讓我們繼續添加一些 CSS 讓它看起來更好看。
CSS - 設置倒數計時器樣式
讓我們為計時器添加一些樣式！我們將添加更好的字體、更改背景顏色、集中元素並將它們放入帶有陰影的風格化容器中：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
height: 100vh;
width: 100%;
background: rgb(175, 90, 90);
display: flex;
justify-content: center;
align-items: center;
}
.date-countdown-container{
display: flex;
align-items: center;
gap: 30px;
}
.date-countdown-container h2{
background-color: #ddd;
padding: 20px;
border-radius: 10px;
border: 5px solid #fff;
-webkit-box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0);
box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0);
}
.date-countdown-container p{
background-color: #ddd;
padding: 2px;
border-radius: 10px;
border: 2px solid #fff;
-webkit-box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0);
box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0);
}
完成後 - 讓我們將樣式表添加到 <head> HTML 文件：
<link rel="stylesheet" href="style.css"/>
運行應用程序
最後 - 我們可以運行應用程序了！
使用 Moment.js？
如果您已經在使用 Moment.js - 為此使用它也沒有什麼壞處。如果你不需要它來做其他事情，那麼絕對沒有必要擁有它，但它確實提供了一個有用的 diff() 功能：
const eventDay = moment("2023-06-03");
const now = moment();
const timeSpan = eventDay.diff(now);
簡單地說，這三行是幫助執行倒計時的主要變量，它們是您提供或允許從程序中獲取的變量，在本例中來自 Moment.js。
如果你用這個替換原始代碼的時間處理邏輯 - 它會包含：
let dayField = document.getElementById('day');
let hourField = document.getElementById('hour');
let minuteField = document.getElementById('minute');
let secondField = document.getElementById('second');
let interval;
const eventDay = moment("2023-06-03");
// Convert to milisecond
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
const countDownFn = () => {
const today = moment();
const timeSpan = eventDay.diff(today);
if (timeSpan <= -today) {
console.log("Unfortunately we have past the event day");
clearInterval(interval);
return;
} else if (timeSpan <= 0) {
console.log("Today is the event day");
clearInterval(interval);
return;
} else {
const days = Math.floor(timeSpan / day);
const hours = Math.floor((timeSpan % day) / hour);
const minutes = Math.floor((timeSpan % hour) / minute);
const seconds = Math.floor((timeSpan % minute) / second);
// Set results
dayField.innerHTML = days;
hourField.innerHTML = hours;
minuteField.innerHTML = minutes;
secondField.innerHTML = seconds;
}
};
interval = setInterval(countDownFn, second);
結論
在本動手指南中 - 我們學習瞭如何使用簡短的 JavaScript 腳本製作自己的倒計時計時器，並設置 HTML 頁面的樣式來顯示倒計時，以及如何利用 Moment.js 執行時間運算。
