HTML5秒殺倒計時代碼
HTML5技術使得我們可以輕松地為網站添加各種交互性和動態性元素,例如秒殺倒計時功能。下面提供一段HTML5的秒殺倒計時代碼,它使用 JavaScript 和 CSS 來實現。
<!-- HTML5秒殺倒計時代碼 --> <p id="countdown"></p> <style> #countdown { font-size: 30px; color: red; text-align: center; } </style> <script> window.onload = function() { var countdown = document.getElementById("countdown"); var endTime = new Date("2021-10-31 00:00:00").getTime(); // 設置結束時間 var x = setInterval(function() { var nowTime = new Date().getTime(); var distance = endTime - nowTime; // 以下為時間單位換算 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); countdown.innerHTML = "剩余時間: " + days + "天 " + hours + "小時 " + minutes + "分鐘 " + seconds + "秒"; if (distance <= 0) { clearInterval(x); countdown.innerHTML = "秒殺已結束!"; } }, 1000); // 每秒鐘執行一次 }; </script>以上代碼通過獲取元素 ID 為“countdown”的標簽,來輸出倒計時信息。其實現原理也非常簡單,就是利用 JavaScript 的定時器函數 setInterval(),來不斷更新距離活動結束剩余的時間,并將更新后的信息輸出到指定標簽中。當時間倒計時結束,即活動時間已經過去,倒計時停止并輸出“秒殺已結束!”的信息。 這段代碼可以讓我們在網站上方便地添加秒殺倒計時功能,使得用戶能夠清楚地知道活動的剩余時間。
上一篇muse導出css
下一篇html5移動圖片代碼