倒計(jì)時(shí)是網(wǎng)頁(yè)中常用的功能之一，可以提醒用戶剩余時(shí)間，也可以增強(qiáng)交互性。本文將介紹如何使用JavaScript實(shí)現(xiàn)倒計(jì)時(shí)，并在倒計(jì)時(shí)過(guò)程中動(dòng)態(tài)改變頁(yè)面中的CSS樣式。

//設(shè)置倒計(jì)時(shí)的結(jié)束時(shí)間，這里設(shè)定為2022年的元旦
var deadline = new Date("January 1, 2022 00:00:00").getTime();
//每秒更新倒計(jì)時(shí)的時(shí)間
var x = setInterval(function() {
//獲取當(dāng)前時(shí)間
var now = new Date().getTime();
//計(jì)算距離結(jié)束時(shí)間還有多長(zhǎng)時(shí)間
var distance = deadline - now;
//計(jì)算距離結(jié)束時(shí)間還有多少天、小時(shí)、分鐘、秒
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);
//將倒計(jì)時(shí)顯示在頁(yè)面上
document.getElementById("countdown").innerHTML = days + " 天 " + hours + " 小時(shí) " 
+ minutes + " 分鐘 " + seconds + " 秒 ";
//根據(jù)倒計(jì)時(shí)的時(shí)間改變頁(yè)面的CSS樣式
if(distance< 10000) {
document.getElementById("countdown").style.color = "red";
document.body.style.backgroundColor = "black";
} else {
document.getElementById("countdown").style.color = "white";
document.body.style.backgroundColor = "blue";
}
}, 1000);

以上是一個(gè)簡(jiǎn)單的倒計(jì)時(shí)功能，倒計(jì)時(shí)結(jié)束后會(huì)停止計(jì)時(shí)。通過(guò)JavaScript代碼控制了頁(yè)面中元素的樣式，實(shí)現(xiàn)了倒計(jì)時(shí)過(guò)程中動(dòng)態(tài)修改CSS樣式的效果。