购物网站的秒杀计时器实现

news/2024/5/10 8:20:24/文章来源:https://blog.csdn.net/weixin_45822171/article/details/125545899

秒杀计时器是我们在制作商城秒杀模块经常用到的，下面是用原生js写的一个简易秒杀计时器，小伙伴可以直接拷贝下来使用。

效果图：

在这里插入图片描述

源代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倒计时</title>
</head>
<body><div class="box"><div class="border" id="d"></div><div class="border" id="h"></div><div class="border" id="m"></div><div class="border" id="s"></div></div>
</body>
</html><script>//设置秒杀结束时间var endTime =  new Date('2022-7-1 10:00:00'),endSeconds = endTime.getTime();//定义变量保存剩余时间var d = h = m =s;//设置定时器，实现限时秒杀效果；var id = setInterval(seckill,1000);function seckill(){var nowTime = new Date();//获取当前时间//获取时间差，单位为秒var remaining = parseInt((endSeconds - nowTime.getTime())/1000);if(remaining > 0){ //判断秒杀是否过期//计算剩余天数(除以60*60*24，获取剩余的天数)d = parseInt(remaining / 86400);//计算剩余小时(除以60*60转化为小时，与24取模，获取剩余的小时)h = parseInt((remaining / 3600) % 24);//计算剩余分钟(除以60转化为分钟，与60取模，获取剩余的分钟)m = parseInt((remaining / 60) % 60);//计算剩余秒(与60取模，获取剩余的秒数)s = parseInt(remaining % 60);//统一利用两位数表示剩余的天、小时、分钟、秒d = d < 10 ? '0' + d : d;h = h < 10 ? '0' + h : h;m = m < 10 ? '0' + m : m;s = s < 10 ? '0' + s : s;}else{clearInterval(id); //秒杀过去，取消定时器d = h = m = s;}//将摄于的天、小时、分钟和秒显示到指定的网页中document.getElementById('d').innerHTML = d + '天';document.getElementById('h').innerHTML = h + '时';document.getElementById('m').innerHTML = m + '分';document.getElementById('s').innerHTML = s + '秒';}
</script><style scoped>.box{display: flex;align-items: flex-start;} 
.border{width: 100px;height: 100px;border: 1px solid #000000;line-height: 100px;white-space: nowrap;text-align: center;
}
</style>