js实现页面的多个日期时间倒计时效果（多个拼团）

时间 2021-01-11

js的日期倒计时在日常项目中还是比较常用的，活动、拼团功能最为常见；
先分析最要是处理好日期函数，然后一个页面上有多个倒计时情况下的方法；
来，先看下 拼多多 的拼单倒计时的效果：

那么，先上个代码吧：
案例效果：

<html>
<head>
    <meta charset="UTF-8">
    <title>js拼团日期倒计时</title>
    <style>
        .mytime{ line-height: 40px; width: 300px; margin: 0 auto;}
    </style>
</head >

<body>
    <div class="mytime jsTime" data-time="2019-03-28 16:58:00">时间1</div>
    <div class="mytime jsTime" data-time="2019-03-29 14:00:02">时间2</div>
    <div class="mytime jsTime" data-time="2019-03-30 18:01:31">时间3</div>
    <div class="mytime jsTime" data-time="2019-03-31 05:05:15">时间4</div>
    <div class="mytime jsTime" data-time="2019-04-01 09:01:43">时间5</div>
</body>

</html>

<script>
  const countdown = {
    domList : document.querySelectorAll('.jsTime'),
    formatNumber(n){
      // return n.toString().padStart(2, '0');  // 用padStart方法要注意兼容问题
      n = n.toString();
      return n[1] ? n : '0' + n;
    },
    setTime(dom){
      //获取设置的时间 如：2019-3-28 14:00:00
      const leftTime = new Date(dom.getAttribute('data-time')) - new Date();
      if (leftTime >= 0) {
        const d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        const h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
        const m = Math.floor(leftTime / 1000 / 60 % 60);
        const s = Math.floor(leftTime / 1000 % 60);
        dom.innerHTML = `剩余${ d > 0 ? d + '天' : '' }${ [h, m, s].map(this.formatNumber).join(':') }`;
      } else {
        clearInterval(dom.$timer);
        dom.innerHTML = '拼团已结束';
      }
    },
    start(){
      this.domList.forEach((dom) => {
        this.setTime(dom);
        dom.$timer = setInterval(() => {
          this.setTime(dom);
        }, 1e3);
      });
    },
  };
  countdown.start();
</script>