首页html倒计时

html倒计时

时间: 2023-07-01 16:15:15 浏览: 129

倒计时.html

倒计时简单制作，思路是利用思路：获取结束的时间-当前的时间>0，本资源好理解，便于学习

好的，以下是一个简单的HTML倒计时代码，可以显示天、小时、分钟和秒数： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>倒计时</title> <script> function countdown() { var now = new Date(); var eventDate = new Date("2022-01-01"); var currentTime = now.getTime(); var eventTime = eventDate.getTime(); var remTime = eventTime - currentTime; var sec = Math.floor(remTime / 1000); var min = Math.floor(sec / 60); var hr = Math.floor(min / 60); var day = Math.floor(hr / 24); hr %= 24; min %= 60; sec %= 60; day = (day < 10) ? "0" + day : day; hr = (hr < 10) ? "0" + hr : hr; min = (min < 10) ? "0" + min : min; sec = (sec < 10) ? "0" + sec : sec; document.getElementById("days").innerHTML = day; document.getElementById("hours").innerHTML = hr; document.getElementById("minutes").innerHTML = min; document.getElementById("seconds").innerHTML = sec; setTimeout(countdown, 1000); } countdown(); </script> </head> <body> <h1>倒计时</h1> <p>距离2022年1月1日还有：</p> <p id="days"></p> <p>天</p> <p id="hours"></p> <p>小时</p> <p id="minutes"></p> <p>分钟</p> <p id="seconds"></p> <p>秒</p> </body> </html> ``` 在这个代码中，我们使用了JavaScript来计算距离2022年1月1日还有多久，并将剩余的时间分解成天、小时、分钟和秒。然后，我们将这些值放入HTML页面中的相应元素中。

阅读全文