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>具體代碼可訪問本人github
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
