HTML5倒計時代碼JS是一種基于JavaScript語言的代碼,用于創建網頁中的倒計時效果。網頁中的倒計時效果可以應用在多個場景中,例如活動倒計時、限時優惠、倒計時搶購等。
HTML5倒計時代碼JS通過使用定時器函數setInterval()實現計時倒計,實時更新倒計時器。其代碼結構與內容如下:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5倒計時代碼JS</title> </head> <body> <h1>倒計時</h1> <p id="countdown"></p> <script> var countDownDate = new Date("Sep 5, 2022 15:37:25").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 + "d " + hours + "h " + minutes + "m " + seconds + "s "; if (distance< 0) { clearInterval(x); document.getElementById("countdown").innerHTML = "EXPIRED"; } }, 1000); </script> </body> </html>
上述代碼實現了一個倒計時效果,截止時間為2022年9月5日15:37:25。代碼中的變量distance表示當前時間與截止時間的時間差,通過Math.floor()函數將時間差轉換為天、時、分、秒四個單位。實時更新倒計時器并在截止時間到達時顯示“EXPIRED”。
通過以上代碼模板,可以自定義輸入倒計時目標時間,快速生成各種樣式的倒計時效果。