色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

js 倒計時改變css

謝彥文2年前9瀏覽0評論

倒計時是網頁中常用的功能之一,可以提醒用戶剩余時間,也可以增強交互性。本文將介紹如何使用JavaScript實現倒計時,并在倒計時過程中動態改變頁面中的CSS樣式。

//設置倒計時的結束時間,這里設定為2022年的元旦
var deadline = new Date("January 1, 2022 00:00:00").getTime();
//每秒更新倒計時的時間
var x = setInterval(function() {
//獲取當前時間
var now = new Date().getTime();
//計算距離結束時間還有多長時間
var distance = deadline - 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);
//將倒計時顯示在頁面上
document.getElementById("countdown").innerHTML = days + " 天 " + hours + " 小時 " 
+ minutes + " 分鐘 " + seconds + " 秒 ";
//根據倒計時的時間改變頁面的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);

以上是一個簡單的倒計時功能,倒計時結束后會停止計時。通過JavaScript代碼控制了頁面中元素的樣式,實現了倒計時過程中動態修改CSS樣式的效果。