HTML倒计时
时间: 2023-07-27 08:11:05 浏览: 49
以下是一个简单的 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 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;
if (remTime < 0) {
clearInterval(interval);
document.getElementById("countdown").innerHTML = "已结束!";
}
}
var interval = setInterval(countdown, 1000);
</script>
</head>
<body>
<h1>距离2022年元旦还有</h1>
<div id="countdown">
<span id="days"></span> 天
<span id="hours"></span> 小时
<span id="minutes"></span> 分钟
<span id="seconds"></span> 秒
</div>
</body>
</html>
```
在该示例中,我们使用 JavaScript 来计算当前时间与目标日期之间的时间差,并将其转换为天数、小时数、分钟数和秒数。然后,我们使用 `setInterval` 函数来每秒钟更新倒计时。最后,我们使用 `innerHTML` 方法将倒计时显示在 HTML 页面上。