微信小程序倒计时展示时钟-ppt倒计时小程序-小程序倒计时功能-即速应用

微信小程序倒计时展示时钟-ppt倒计时小程序-小程序倒计时功能

浏览量：2167 时间：2020-04-06 来源：_Flower seven

1.
以下所述参考网上众多大佬略写，本人只是菜鸟一枚，记录博客主要怕自己记不住，方便以后参考，有何不足，欢迎补充…方式方法和网上大多大佬有雷同，因为我也是参考网上各位大佬的…
2.
一、单独一个页面只有一个时展示：
进入页面获取结束时间或开始时间格式化再执行倒计时函数data:{countDown:'00分00秒',//定义初始展示的时间}//到计时时钟handleCountdown(){varactivity_remain'',nownewDate().getTime(),//获取当前时间end_timethis.data.activity_end/1000;activity_remainend_time-(now/1000);varthatthis;that.setData({countDown:that.dateformat(activity_remain)});//渲染倒计时时钟timer1setTimeout(function(){that.handleCountdown(that);that.setData({end_time:end_time-1})},1000)if(activity_remain0){clearTimeout(timer1);letcountDown'00分00秒'that.setData({countDown:countDown})returnfalse;}},//格式化时间dateformat(micro_second){//总秒数varsecondMath.floor(micro_second);//小时varhrMath.floor(second/3600%24);//分钟varminMath.floor(second/60%60);//秒varsecMath.floor(second%60);if(min10){min"0"+min;}if(sec10){sec"0"+sec;}returnmin+"分"+sec+'秒';},3.
二、页面有多个倒计时展示（数组）：创建一个空数组，将结束时间和IDpush进去
data：{//倒计时countDownList:[],//展示倒计时的数组actEndTimeList:[],//结束时间和ID放进去}timeFormat(param){//小于10的格式化函数returnparam10?'0'+param:param;},//到计时时钟handleCountdown(){//获取当前时间，同时得到活动结束时间数组letnewTimenewDate().getTime();letendTimeListthis.data.actEndTimeList;letcountDownArr[];//对结束时间进行处理渲染到页面endTimeList.forEach(o{letorderIdo.id;letendTimenewDate(o.endTime);letobjnull,aaa"";//如果活动未结束，对时间进行处理if(endTime-newTime0){lettime(endTime-newTime)/1000;//获取天、时、分、秒letdayparseInt(time/(60*60*24));lethouparseInt(time%(60*60*24)/3600);letminparseInt(time%(60*60*24)%3600/60);letsecparseInt(time%(60*60*24)%3600%60);obj{day:this.timeFormat(day),hou:this.timeFormat(hou),min:this.timeFormat(min),sec:this.timeFormat(sec)},aaa{obj,orderId}}else{//活动已结束，全部设置为'00'obj{day:'00',hou:'00',min:'00',sec:'00'},aaa{obj,orderId}}countDownArr.push(aaa);})//渲染，然后每隔一秒执行一次倒计时函数this.setData({countDownList:countDownArr,isCountdown:true})//setTimeout(this.handleCountdown,1000);if(this.data.isCountdowntrue){setTimeout(this.handleCountdown,1000);}},