用html写一个倒计时
时间: 2023-10-03 16:02:45 浏览: 39
好的,以下是一个简单的倒计时的 HTML 代码,你可以根据自己的需求进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<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 days = Math.floor(remTime / (1000 * 60 * 60 * 24));
var hours = Math.floor((remTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((remTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remTime % (1000 * 60)) / 1000);
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
setTimeout(countdown, 1000);
}
</script>
</head>
<body onload="countdown()">
<h1>倒计时</h1>
<p>距离2022年1月1日还有:</p>
<div id="countdown">
<span id="days"></span> 天
<span id="hours"></span> 小时
<span id="minutes"></span> 分钟
<span id="seconds"></span> 秒
</div>
</body>
</html>
```
该倒计时会自动计算当前时间与 2022 年 1 月 1 日的时间差,然后将剩余的天数、小时数、分钟数、秒数分别显示出来。你可以根据自己的需求自定义目标时间和样式。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)