倒計時是網頁中常用的功能之一,可以提醒用戶剩余時間,也可以增強交互性。本文將介紹如何使用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樣式的效果。
上一篇html 如何設置右對齊
下一篇html 十六顏色代碼