快捷導(dǎo)航

js實(shí)現(xiàn)頁(yè)面多個(gè)日期時(shí)間倒計(jì)時(shí)效果

更新時(shí)間：2019年06月20日 11:47:13 作者：xiexikk

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)頁(yè)面多個(gè)日期時(shí)間倒計(jì)時(shí)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

js的日期倒計(jì)時(shí)在日常項(xiàng)目中還是比較常用的，活動(dòng)、拼團(tuán)功能最為常見(jiàn)，先分析最要是處理好日期函數(shù)，然后一個(gè)頁(yè)面上有多個(gè)倒計(jì)時(shí)情況下的方法；

來(lái)，先看下拼多多的拼單倒計(jì)時(shí)的效果：

那么，先上個(gè)代碼吧：

案例效果：

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

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

<!-- 方法1 -->
<script>
 const countdown = {
  domList : document.querySelectorAll('.jsTime'),
  formatNumber(n){
   // return n.toString().padStart(2, '0'); // 用padStart方法要注意兼容問(wèn)題
   n = n.toString();
   return n[1] ? n : '0' + n;
  },
  setTime(dom){
   //獲取設(shè)置的時(shí)間 如：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 = '拼團(tuán)已結(jié)束';
   }
  },
  start(){
   this.domList.forEach((dom) => {
    this.setTime(dom);
    dom.$timer = setInterval(() => {
     this.setTime(dom);
    }, 1e3);
   });
  },
 };
 countdown.start();
</script>

<!-- 方法2 -->
<script>
 //時(shí)間格式處理
 const formatNumber = n => {
 n = n.toString();
 return n[1] ? n : '0' + n;
 };
 //團(tuán)購(gòu)倒計(jì)時(shí)
 const teamCountTime = (obj) => {
 var timer = null;
 function fn(){
  //獲取設(shè)置的時(shí)間 如：2019-3-28 14:00:00 ios系統(tǒng)得加正則.replace(/\-/g, '/');
  var setTime = obj.getAttribute('data-time').replace(/\-/g, '/');
  //獲取當(dāng)前時(shí)間
  var date = new Date(),
   now  = date.getTime(),
   endDate = new Date(setTime),
   end  = endDate.getTime();
  //時(shí)間差
  var leftTime = end - now;
  //d,h,m,s 天時(shí)分秒
  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 = '拼團(tuán)已結(jié)束';
  }
 }
 fn();
 };
 let jsTimes = document.querySelectorAll('.jsTime2');
 jsTimes.forEach((obj) => {
 teamCountTime(obj);
 });
</script>

具體代碼可訪問(wèn)本人github

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: