HTML和JS的結合是一個非常強大的工具，可以為網頁的展示和交互增加很多的動態效果。倒計時功能是一個常見的需求，下面我們來看一下如何利用HTML和JS來實現一個簡單的倒計時。
<!DOCTYPE html>
<html>
<head>
<title>倒計時</title>
</head>
<body>
<p id="countdown"></p>
<script>
// 設定倒計時的結束時間
var endtime = new Date("2022/1/1 00:00:00");
// 定時器每秒調用一次countdown函數
setInterval(countdown, 1000);
function countdown() {
// 計算距離結束時間的毫秒數
var now = new Date();
var distance = endtime - now;
// 計算剩余的天數、小時數、分鐘數、秒數
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 將倒計時的時間展示在頁面上
var countdownText = "距離" + endtime.getFullYear() + "年" + (endtime.getMonth() + 1) + "月" + endtime.getDate() + "日還有" + days + "天" + hours + "小時" + minutes + "分" + seconds + "秒";
document.getElementById("countdown").innerHTML = countdownText;
}
</script>
</body>
</html>代碼解釋：
我們首先通過HTML代碼創建了一個p元素，給他設定了一個id。接下來在JS代碼中，我們聲明了一個變量endtime來代表倒計時的結束時間。接著使用setInterval函數來每一秒調用一次countdown函數來更新倒計時。在countdown函數內部，我們通過計算當前時間和結束時間的差值，計算出倒計時剩余的天數、小時數、分鐘數和秒數。最后將倒計時的信息展示在頁面上。
總結：
HTML和JS結合使用，可以方便的實現網頁的一些動態效果，例如本文演示的倒計時功能。我們在網頁制作的過程中，可以根據需求使用HTML和JS之間的交互，讓網頁在用戶體驗上更加優秀，更加具有吸引力。