在網頁中，倒計時是一個非常實用的功能，可以用來倒計時活動開始或者結束的時間，也可以用來倒計時用戶提交操作的時間等等。本文將為大家介紹如何在 HTML 中設置多個倒計時。
<!DOCTYPE html>
<html>
<head>
<title>多個倒計時</title>
<script>
function countdown(id, date) {
var now = new Date().getTime();
var count = date - now;
var days = Math.floor(count / (1000 * 60 * 60 * 24));
var hours = Math.floor((count % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((count % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((count % (1000 * 60)) / 1000);
document.getElementById(id).innerHTML = days + " 天 " + hours + " 小時 " + minutes + " 分鐘 " + seconds + " 秒 ";
if (count< 0) {
clearInterval(x);
document.getElementById(id).innerHTML = "已結束";
}
}
window.onload = function() {
countdown("countdown1", new Date("Mar 31, 2022 00:00:00").getTime());
countdown("countdown2", new Date("Apr 15, 2022 12:00:00").getTime());
countdown("countdown3", new Date("May 1, 2022 00:00:00").getTime());
};
</script>
</head>
<body>
<h1>多個倒計時</h1>
<p id="countdown1"></p>
<p id="countdown2"></p>
<p id="countdown3"></p>
</body>
</html>上面的代碼使用了一個名為 countdown 的函數來更新倒計時。這個函數有兩個參數，id 表示在哪個元素中顯示倒計時，date 表示倒計時結束的時間點。在函數中，首先獲取當前時間和結束時間之間的時間差，然后將時間差轉換為天、小時、分鐘和秒。最后使用 document.getElementById() 方法將計算出來的時間差更新到頁面中。
在頁面加載完成后，我們調用 window.onload 函數來設置倒計時的結束時間。在本例子中，我們設置了三個不同的倒計時，分別表示三個不同的活動：第一個活動將在 2022 年 3 月 31 日開始，第二個活動將在 2022 年 4 月 15 日中午 12 點開始，第三個活動將在 2022 年 5 月 1 日開始。
通過上面的代碼，我們可以在同一個頁面中方便地設置多個倒計時。這對于需要倒計時的網站來說非常實用，可以讓用戶清楚地知道還有多少時間可以參加活動，或者提交操作。
下一篇deja vue