首页炫酷的倒计时时钟html代码

炫酷的倒计时时钟html代码

时间: 2024-12-31 11:10:31 浏览: 12

创建一个炫酷的倒计时时钟HTML代码通常结合CSS样式和JavaScript。以下是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>酷炫倒计时</title> <style> #countdown { font-size: 60px; text-align: center; color: #fff; background-color: #4caf50; padding: 50px; border-radius: 10px; } </style> </head> <body> <div id="countdown">00:00:00</div> <script> // 假设目标时间是1分钟后 const targetDate = new Date(); targetDate.setSeconds(targetDate.getSeconds() + 60); function updateCountdown() { const now = new Date(); const secondsLeft = Math.floor((targetDate - now) / 1000); document.getElementById('countdown').innerText = formatTime(secondsLeft); if (secondsLeft <= 0) { clearInterval(intervalId); document.getElementById('countdown').innerText = "结束"; } else { setTimeout(updateCountdown, 1000); } } let intervalId; intervalId = setInterval(updateCountdown, 1000); function formatTime(timeInSeconds) { return padZero(Math.floor(timeInSeconds / 60), 2) + ":" + padZero(Math.floor(timeInSeconds % 60), 2) + ":" + padZero(timeInSeconds % 60, 2); } function padZero(value, length) { return value.toString().padStart(length, '0'); } </script> </body> </html> ``` 这个代码首先设置了倒计时的目标时间为1分钟，然后每秒更新显示的时间，并在倒计时结束后停止计时。

阅读全文