js实现倒计时效果
时间: 2023-09-06 20:08:44 浏览: 53
好的,这里给你提供一种常见的实现倒计时的方式,使用 JavaScript 和 HTML:
HTML 代码:
```
<div id="countdown"></div>
```
JavaScript 代码:
```
// 设置倒计时的截止时间
var countDownDate = new Date("Jan 1, 2022 00:00:00").getTime();
// 每秒钟更新倒计时的时间
var x = 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);
// 将时间显示在页面上
document.getElementById("countdown").innerHTML = days + " 天 " + hours + " 小时 "
+ minutes + " 分钟 " + seconds + " 秒 ";
// 如果倒计时结束,则停止更新时间
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "倒计时已结束";
}
}, 1000);
```
这段代码会实现一个倒计时效果,显示从当前时间到指定日期的时间差,以天、小时、分钟和秒的形式展示。同时,如果时间到了指定日期,就会在页面上显示“倒计时已结束”。