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

不爱吃糖的程序媛

发布于 2024-01-18 21:22:59

1440

发布于 2024-01-18 21:22:59

文章被收录于专栏：夏天的前端笔记夏天的前端笔记

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-01-18，如有侵权请联系 cloudcommunity@tencent.com 删除

var