首页跨年倒计时html代码2024

跨年倒计时html代码2024

时间: 2023-12-31 19:24:59 浏览: 184

以下是一个简单的跨年倒计时的HTML代码示例，其中使用了龙辰辰吉祥物和其他图片作为背景，并显示倒计时的时间。当时间归零时，将会触发一场烟花秀来迎接2024年。 ```html <!DOCTYPE html> <html> <head> <title>2024跨年倒计时</title> <style> body { background-image: url('龙辰辰吉祥物.jpg'); background-size: cover; background-repeat: no-repeat; text-align: center; font-family: Arial, sans-serif; } h1 { color: white; font-size: 48px; margin-top: 200px; } </style> </head> <body> <h1 id="countdown"></h1> <script> // 设置倒计时的目标时间 var countdownDate = new Date("Jan 1, 2024 00:00:00").getTime(); // 每秒更新倒计时 var countdown = 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(countdown); document.getElementById("countdown").innerHTML = "Happy New Year 2024!"; // 触发烟花秀的代码 // ... } }, 1000); </script> </body> </html> ``` 请注意，上述代码中的背景图片路径需要根据实际情况进行修改。另外，触发烟花秀的代码需要根据具体需求进行编写。

阅读全文