js实现页面多个日期时间倒计时效果

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

来，先看下 拼多多 的拼单倒计时的效果：

那么，先上个代码吧：

案例效果：

<style>
   .mytime{ line-height: 40px; width: 300px; margin: 0 auto;}
 </style>

<div class="mytime jsTime" data-time="2019-04-01 16:58:00">时间1</div>
<div class="mytime jsTime" data-time="2019-04-04 18:00:02">时间2</div>
<div class="mytime jsTime" data-time="2019-04-05 19:01:31">时间3</div>
<div class="mytime jsTime" data-time="2019-04-06 05:05:15">时间4</div>
<div class="mytime jsTime" data-time="2019-04-07 09:01:43">时间5</div>
<hr>
<div class="mytime jsTime2" data-time="2019-04-08 16:30:05">时间1</div>
<div class="mytime jsTime2" data-time="2019-04-09 14:01:22">时间2</div>
<div class="mytime jsTime2" data-time="2019-04-10 18:06:25">时间3</div>
<div class="mytime jsTime2" data-time="2019-04-11 22:07:19">时间4</div>
<div class="mytime jsTime2" data-time="2019-04-12 23:12:38">时间5</div>

<!-- 方法1 -->
<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 ios系统得加正则.replace(/\-/g, '/');
      const leftTime = new Date(dom.getAttribute('data-time').replace(/\-/g, '/')) - 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>

<!-- 方法2 -->
<script>
 //时间格式处理
 const formatNumber = n => {
  n = n.toString();
  return n[1] ? n : '0' + n;
 };
 //团购倒计时
 const teamCountTime = (obj) => {
  var timer = null;
  function fn(){
   //获取设置的时间 如：2019-3-28 14:00:00 ios系统得加正则.replace(/\-/g, '/');
   var setTime = obj.getAttribute('data-time').replace(/\-/g, '/');
   //获取当前时间
   var date  = new Date(),
     now   = date.getTime(),
     endDate = new Date(setTime),
     end   = endDate.getTime();
   //时间差
   var leftTime = end - now;
   //d,h,m,s 天时分秒
   var d, h,m,s;
   var otime = '';
   if (leftTime >= 0) {
    d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
    h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
    m = Math.floor(leftTime / 1000 / 60 % 60);
    s = Math.floor(leftTime / 1000 % 60);
    if (d <= 0) {
     otime = [h, m, s].map(formatNumber).join(':');
    } else {
     otime = d + '天' + [h, m, s].map(formatNumber).join(':');
    }
    obj.innerHTML = '剩余' + otime;
    //
    timer = setTimeout(fn, 1e3);
   } else {
    clearTimeout(timer);
    obj.innerHTML = '拼团已结束';
   }
  }
  fn();
 };
 let jsTimes = document.querySelectorAll('.jsTime2');
 jsTimes.forEach((obj) => {
  teamCountTime(obj);
 });
</script>

具体代码可访问本人github

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。