js实现页面多个日期时间倒计时效果

射流研究…的日期倒计时在日常项目中还是比较常用的，活动、拼团功能最为常见，先分析最要是处理好日期函数，然后一个页面上有多个倒计时情况下的方法；

来，先看下拼多多的拼单倒计时的效果：

那么，先上个代码吧：

案例效果：

风格我的时间{行高： 40px宽度： 300像素；margin : 0 auto }/style div class=' my time jsTime ' data-time=' 2019-04-01 16:58:00 '时间1/div div class=' my time jsTime ' data-time=' 2019-04-04 18:00:02 '时间2/div div class=' my time jsTime ' data-time=' 2019-04-05 19:01:31 '时间3/div div class=' my time jsTime ' data-time=' 2019-04-06 05:05:15 '时间4/div div class=' my time jsTime ' data-time=' 2019-04-07 09:01:43 '时间5/div hrdiv class=' my time jstime 2 数据-时间=' 2019-04-08 16:30:05 '时间1/div div class=' my time js time 2 ' data-time=' 2019-04-09 14:01:22 '时间2/div div class=' my time js time 2 ' data-time=' 2019-04-10 18:06:25 '时间3/div div class=' my time js time 2 ' data-time=' 2019-04-11 22:07:19 '时间4/div div class=' my time js time 2 ' data-time=' 2019-04-12 23:12:38 '时间5/div！ -方法1 -脚本常量倒计时={ DOM列表：文档。queryselectorall(' .jsTime ')、formatNumber(n){ //返回n.toString().padStart(2，' 0 ')；//用padStart方法要注意兼容问题n=n . ToString()；返回n[1]？北纬：度0分；}，setTime(dom){ //获取设置的时间如：2019-3-28 14:00:00 ios系统得加正则。替换(/\-/g，'/')；常量左侧时间=新日期(dom.getAttribute('数据时间').替换(/\-/g，'/')-新日期();if(剩余时间=0){ const d=math。楼层(左侧时间/1000/60/60/24)；const h=数学。楼层(左侧时间/1000/60/60% 24)；const m=数学。楼层(左侧时间/1000/60% 60)；const s=数学。楼层(左侧时间/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。set time(DOM)；多姆$ timer=setInterval(()={ this。set time(DOM)；}，1e 3)；});}, };倒计时。start()；/脚本！-方法2 -脚本/时间格式处理const格式数字=n={ n=n . ToString()；返回n[1]？北纬：度0分；};//团购倒计时const TeamCountTime=(obj)={ var timer=null；函数fn(){ //获取设置的时间如：2019-3-28 14:00:00 ios系统得加正则。替换(/\-/g，'/')；var setTime=obj。GetAttribute('数据时间').替换(/\-/g，'/')；//获取当前时间var date=new Date()，now=date.getTime()，endDate=new Date(setTime)，end=end Date。gettime()；//时间差var左时间=结束-现在；//d，h，m，s天时分秒var d，h，m，s；var otime=if(剩余时间=0){ d=math。楼层(左侧时间/1000/60/60/24)；h=数学。楼层(左侧时间/1000/60/60% 24)；m=数学。楼层(左侧时间/1000/60% 60)；s=数学。楼层(左侧时间/1000% 60)；if (d=0) { otime=[h，m，s].地图（格式号)。join(' : ')；} else { otime=d '天[h，m，s].地图（格式号)。join(' : ')；} obj.innerHTML='剩余otime//timer=setTimeout(fn，1e 3)；} else { clearTimeout(计时器);obj.innerHTML='拼团已结束；} } fn()；};让jsTimes=文档。queryselectorall('。js time 2’)；jstimes。foreach((obj)={ teamcuntime(obj)；});/script具体代码可访问本人开源代码库

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