在網頁設計中,倒計時是一個廣泛使用的特效,它不僅增強了用戶體驗,還能有效地提醒用戶剩余時間。本文將介紹如何使用 HTML 和 JavaScript 來實現電腦倒計時。
首先,在 HTML 中使用 pre 標簽來添加倒計時代碼,如下所示:
<div id="countdown"></div> <script> var countDownDate = new Date("Jan 1, 2022 00:00:00").getTime(); var x = setInterval(function() { var now = new Date().getTime(); var distance = countDownDate - 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 + "秒 "; if (distance < 0) { clearInterval(x); document.getElementById("countdown").innerHTML = "EXPIRED"; } }, 1000); </script>以上代碼中,我們使用了 div 標簽來顯示倒計時,它的 id 為 countdown。我們通過 JavaScript 來獲取它,并使用 setInterval 函數來不斷更新倒計時。 具體地,我們使用了 Date 構造函數來初始化一個倒計時結束時間,在本例中它被設置為 2022 年 1 月 1 日 00:00:00。我們使用 setInterval 函數來不斷地獲取當前時間,計算距離結束時間還有多少時間,并將時間信息更新到 countdown 中。 最后,當距離結束時間小于 0 時,我們停止計時器,并在 countdown 中顯示 EXPIRED。 本文介紹了如何使用 HTML 和 JavaScript 來實現電腦倒計時效果。讀者可以根據需要更改倒計時結束時間或修改倒計時的顯示方式。感謝您的閱讀!