购物网站的秒杀计时器实现 - 成就云开发者社区

秒杀计时器是我们在制作商城秒杀模块经常用到的，下面是用原生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){ //判断秒杀是否过期

//计算剩余天数(除以606024，获取剩余的天数)

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>