这篇文章主要为大家详细介绍了js实现页面多个日期时间倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
js的日期倒计时在日常项目中还是比较常用的,活动、拼团功能最为常见,先分析最要是处理好日期函数,然后一个页面上有多个倒计时情况下的方法;
来,先看下 拼多多 的拼单倒计时的效果:
那么,先上个代码吧:
页面布局代码:<div class="mytime jsTime" data-time="2019-06-21 16:58:00">时间1</div> <div class="mytime jsTime" data-time="2019-06-22 18:00:02">时间2</div> <div class="mytime jsTime" data-time="2019-06-23 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>
CSS样式代码:
<style> .mytime{ line-height: 40px; width: 300px; margin: 0 auto;} </style>
方法一:
<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>
方法二:
<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>
完整代码:
<html> <head> <meta charset="UTF-8" /> <title>js拼团日期倒计时</title> <style> .mytime{ line-height: 40px; width: 300px; margin: 0 auto;} </style> </head> <body> <div class="mytime jsTime" data-time="2019-06-21 16:58:00"> 时间1 </div> <div class="mytime jsTime" data-time="2019-06-22 18:00:02"> 时间2 </div> <div class="mytime jsTime" data-time="2019-06-23 19:01:31"> 时间3 </div> <div class="mytime jsTime" data-time="2019-06-20 22:15:15"> 时间4 </div> <div class="mytime jsTime" data-time="2019-04-07 09:01:43"> 时间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> </body> </html>
案例效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持轩宇网。
原文链接:https://blog.csdn.net/weixin_42211816/article/details/88871407
最后修改:2019 年 06 月 20 日
© 允许规范转载