js如何實現(xiàn)頁面多個日期時間倒計時效果

這篇文章主要介紹了js如何實現(xiàn)頁面多個日期時間倒計時效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

js的日期倒計時在日常項目中還是比較常用的，活動、拼團功能最為常見，先分析最要是處理好日期函數(shù)，然后一個頁面上有多個倒計時情況下的方法；

來，先看下 拼多多 的拼單倒計時的效果：

那么，先上個代碼吧：

案例效果：

<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系統(tǒng)得加正則.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系統(tǒng)得加正則.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>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“js如何實現(xiàn)頁面多個日期時間倒計時效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!