限时抢购倒计时效果

HTML：

<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>

 

JS：

 1 <!-- 方法1 -->
 2 <script>
 3     const countdown = {
 4         domList : document.querySelectorAll('.jsTime'),
 5         formatNumber(n){
 6             // return n.toString().padStart(2, '0');  // 用padStart方法要注意兼容问题
 7             n = n.toString();
 8             return n[1] ? n : '0' + n;
 9         },
10         setTime(dom){
11             //获取设置的时间 如：2019-3-28 14:00:00  ios系统得加正则.replace(/\-/g, '/');
12             const leftTime = new Date(dom.getAttribute('data-time').replace(/\-/g, '/')) - new Date();
13             if (leftTime >= 0) {
14                 const d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
15                 const h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
16                 const m = Math.floor(leftTime / 1000 / 60 % 60);
17                 const s = Math.floor(leftTime / 1000 % 60);
18                 dom.innerHTML = `剩余${ d > 0 ? d + '天' : '' }${ [h, m, s].map(this.formatNumber).join(':') }`;
19             } else {
20                 clearInterval(dom.$timer);
21                 dom.innerHTML = '拼团已结束';
22             }
23         },
24         start(){
25             this.domList.forEach((dom) => {
26                 this.setTime(dom);
27                 dom.$timer = setInterval(() => {
28                     this.setTime(dom);
29                 }, 1e3);
30             });
31         },
32     };
33     countdown.start();
34 </script>

 1 <!-- 方法2 -->
 2 <script>
 3   //时间格式处理
 4   const formatNumber = n => {
 5     n = n.toString();
 6     return n[1] ? n : '0' + n;
 7   };
 8   //团购倒计时
 9   const teamCountTime = (obj) => {
10     var timer = null;
11     function fn(){
12       //获取设置的时间 如：2019-3-28 14:00:00  ios系统得加正则.replace(/\-/g, '/');
13       var setTime = obj.getAttribute('data-time').replace(/\-/g, '/');
14       //获取当前时间
15       var date    = new Date(),
16           now     = date.getTime(),
17           endDate = new Date(setTime),
18           end     = endDate.getTime();
19       //时间差
20       var leftTime = end - now;
21       //d,h,m,s 天时分秒
22       var d, h,m,s;
23       var otime = '';
24       if (leftTime >= 0) {
25         d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
26         h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
27         m = Math.floor(leftTime / 1000 / 60 % 60);
28         s = Math.floor(leftTime / 1000 % 60);
29         if (d <= 0) {
30           otime = [h, m, s].map(formatNumber).join(':');
31         } else {
32           otime = d + '天' + [h, m, s].map(formatNumber).join(':');
33         }
34         obj.innerHTML = '剩余' + otime;
35         //
36         timer = setTimeout(fn, 1e3);
37       } else {
38         clearTimeout(timer);
39         obj.innerHTML = '拼团已结束';
40       }
41     }
42     fn();
43   };
44   let jsTimes = document.querySelectorAll('.jsTime2');
45   jsTimes.forEach((obj) => {
46     teamCountTime(obj);
47   });
48 </script>

效果：　　

　　

原文地址：http://www.javashuo.com/article/p-rrnjnpvo-sr.html