2021年即將到來,為了慶祝這個特殊的日子,很多開發者都會用特殊的代碼來制作倒計時效果。在HTML中,我們可以使用JavaScript來實現這一效果。
下面就是一個簡單的HTML代碼,通過這個代碼,我們可以實現一個2021倒計時到0的效果。
<div id="countdown"> <span id="days"></span>天 <span id="hours"></span>小時 <span id="minutes"></span>分鐘 <span id="seconds"></span>秒 </div> <script> function countdown() { const countdownDate = new Date("Jan 1, 2021 00:00:00").getTime(); const now = new Date().getTime(); const distance = countdownDate - now; const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById("days").innerHTML = days; document.getElementById("hours").innerHTML = hours; document.getElementById("minutes").innerHTML = minutes; document.getElementById("seconds").innerHTML = seconds; if (distance< 0) { clearInterval(x); document.getElementById("countdown").innerHTML = "HAPPY NEW YEAR!"; } } const x = setInterval(countdown, 1000); </script>
在上面的代碼中,我們首先定義了一個ID為“countdown”的div元素,并在其中添加4個span元素,分別用于顯示天、小時、分鐘和秒數。接著,我們編寫了JavaScript代碼來實現倒計時效果。具體實現方法是通過計算當前時間和目標時間之間的距離來得到剩余的天數、小時數、分鐘數和秒數。
最后,我們使用setInterval()函數來定時執行countdown()函數,每隔1秒鐘更新一次剩余時間數據。當倒計時結束后,我們就會清除setInterval()函數,同時在div元素中顯示“HAPPY NEW YEAR!”。
希望這個簡單的HTML代碼能幫助你實現一個有趣的新年倒計時效果!