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>

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值