首页2025元旦跨年html代码

2025元旦跨年html代码

时间: 2024-12-22 18:10:25 浏览: 1116

在HTML中创建一个简单的跨年倒计时页面，你可以使用`<div>`元素结合CSS样式以及JavaScript来实现动态效果。下面是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>2025元旦跨年倒计时</title> <style> #countdown { font-size: 4rem; text-align: center; margin-top: 50px; } @keyframes countdown { 0% {color: black;} 100% {color: red;} } </style> <script> function countDown(date) { var now = new Date(); var distance = date - now; if (distance < 0) { clearInterval(interval); document.getElementById("countdown").innerHTML = "新年快乐!"; return; } 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 = "距离2025年元旦还有:\n" + days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒"; var interval = setInterval(function() { countDown(date); }, 1000); } // 设置倒计时结束日期 var endDate = new Date('2025-01-01T00:00:00'); countDown(endDate); </script> </head> <body> <div id="countdown"></div> </body> </html> ``` 这个代码会显示一个从当前时间到2025年1月1日零点的倒计时，并在新年到来时变为“新年快乐”。注意这只是一个基础示例，实际应用时可能需要考虑用户体验和更丰富的UI设计。

阅读全文