秒杀计时器是我们在制作商城秒杀模块经常用到的，下面是用原生js写的一个简易秒杀计时器，小伙伴可以直接拷贝下来使用。
效果图：
源代码：
代码语言：javascript复制<!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>
