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

秒杀计时器是我们在制作商城秒杀模块经常用到的，下面是用原生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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

相关阅读:
css3 2d转换transform详细解析与代码实例transform
《重构：改善既有代码的设计》读书笔记(上)
torch函数学习
做外贸站群效果怎么样？独立站站群是什么？
简化 Go 开发：使用强大的工具提高生产力
微信小程序开发之会议oa（首页搭建）
Android 9.0系统源码_SystemUI（三）系统状态图标控制
webpack打包gz文件，nginx开启gzip压缩
【ARM-0】基本概念
7种方法教你如何解决msvcp140_1.dll丢失问题，一键修复dll丢失问题

原文地址：https://blog.csdn.net/weixin_45822171/article/details/125545899