用js写秒杀倒计时页面
时间: 2023-12-25 10:03:03 浏览: 32
以下是用JavaScript编写秒杀倒计时页面的示例代码:
HTML代码:
```
<div id="countdown">
<div class="countdown-item">
<span id="days"></span>
<span>Days</span>
</div>
<div class="countdown-item">
<span id="hours"></span>
<span>Hours</span>
</div>
<div class="countdown-item">
<span id="minutes"></span>
<span>Minutes</span>
</div>
<div class="countdown-item">
<span id="seconds"></span>
<span>Seconds</span>
</div>
</div>
```
JavaScript代码:
```
// 设置秒杀结束时间
var endtime = new Date("2021-12-31T23:59:59Z").getTime();
// 更新倒计时
var x = setInterval(function() {
// 获取当前时间
var now = new Date().getTime();
// 计算距离秒杀结束的时间
var distance = endtime - 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("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
// 如果倒计时结束,则显示提示信息
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "The countdown is over!";
}
}, 1000);
```
在上面的代码中,首先我们使用JavaScript设置了秒杀结束时间,然后使用setInterval()函数每隔一秒钟更新一次倒计时。在更新倒计时的过程中,我们计算了距离秒杀结束的时间,然后将剩余的天、小时、分钟、秒更新到页面上。最后,如果倒计时结束,我们会在页面上显示提示信息。