帮我写一个倒计时
时间: 2023-08-20 14:13:37 浏览: 74
Vue写一个简单的倒计时按钮功能
5星 · 资源好评率100%
好的,以下是一个简单的倒计时的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>倒计时示例</title>
<meta charset="utf-8">
</head>
<body>
<h1>距离下一次课还有</h1>
<div id="countdown"></div>
<script>
// 目标日期,这里设置为下周一上午9点
var targetDate = new Date("2021-11-22T09:00:00Z");
// 每秒更新倒计时
var countdown = setInterval(function() {
// 当前时间
var now = new Date().getTime();
// 相差的时间(单位为毫秒)
var difference = targetDate - now;
// 计算相差的天数、小时数、分钟数和秒数
var days = Math.floor(difference / (1000 * 60 * 60 * 24));
var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((difference % (1000 * 60)) / 1000);
// 将倒计时显示在页面上
document.getElementById("countdown").innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
// 如果已经过期,则清除倒计时
if (difference < 0) {
clearInterval(countdown);
document.getElementById("countdown").innerHTML = "已过期";
}
}, 1000);
</script>
</body>
</html>
```
在这个示例中,我们首先设置了目标日期(这里设置为下周一上午9点),然后每秒钟更新一次倒计时。在每次更新时,我们计算当前时间和目标日期之间的时间差,然后计算出相差的天数、小时数、分钟数和秒数,并将其显示在页面上。如果已经过期,则清除倒计时并显示“已过期”。
阅读全文