首页帮我写一个html倒计时页面

帮我写一个html倒计时页面

时间: 2024-09-07 14:04:17 浏览: 63

【HTML倒计时源码】页面倒计时，活动倒计时，开幕倒计时

要创建一个简单的HTML倒计时页面，你需要结合HTML、CSS和JavaScript。下面是一个基本的实现示例： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>倒计时页面</title> <style> #countdown { font-size: 24px; color: red; text-align: center; } </style> <script> // 设置目标时间，这里以2023年12月31日23:59:59为例 var countDownDate = new Date("Dec 31, 2023 23:59:59").getTime(); // 更新倒计时每秒执行的函数 var countdownFunction = 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); // 显示结果在id为countdown的元素中 document.getElementById("countdown").innerHTML = days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒 "; // 如果倒计时结束，显示一些文本 if (distance < 0) { clearInterval(countdownFunction); document.getElementById("countdown").innerHTML = "时间到！"; } }, 1000); </script> </head> <body> <div id="countdown"></div> </body> </html> ``` 这段代码创建了一个简单的倒计时页面，页面中会显示距离2023年12月31日23:59:59还有多少天、小时、分钟和秒。当倒计时结束时，页面会显示“时间到！”。请注意，你可以修改`countDownDate`变量来设置你想要的目标时间。倒计时的样式可以通过CSS进行自定义调整，以符合你的页面设计需求。

阅读全文