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>

具体代码可访问本人

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