1.

效果传送门至小程序代码片段

创建组件conut-down组件.wxml!--count-down/count-down.wxml--textclass"c-class"{{time}}/text复制代码组件.js参类型说明targetNumber//结束时间showDayBoolean//是否显示天callbackString//回调formatArray//自定义格式clearTimerBoolean//清除定时器//count-down/count-down.jsComponent({externalClasses:['c-class'],//自定义样式/***组件的属性列表*/properties:{target:Number,//结束时间showDay:Boolean,//是否显示天callback:String,//回调format:Array,//自定义格式clearTimer:Boolean//清除定时器},/***组件的初始数据*/data:{time:''},ready(){this.getFormat();},/***组件的方法列表*/methods:{init(){constselfthis;setTimeout(function(){self.getLastTime.call(self);},1000);},getFormat(){constdatathis.data;if(data.format.length3)data.format.splice(0,0,'');this.getLastTime();},getLastTime(){constdatathis.data;constgapTimeMath.ceil((data.target-newDate().getTime())/1000);//距离结束还有多少秒lettime'00:00:00';letday'00';constformatdata.format;if(gapTime0){daythis.formatNum(parseInt(gapTime/86400));//天letlastTimegapTime%86400;consthourthis.formatNum(parseInt(lastTime/3600));//时lastTimelastTime%3600;constminutethis.formatNum(parseInt(lastTime/60));//分constsecondthis.formatNum(lastTime%60);//秒if(data.format.length0){//自定义格式处理time`${data.showDay?`${day}${format[0]}`:''}${hour}${format[1]}${minute}${format[2]}${second}${format[3]}`;}else{time`${data.showDay?`${day}:`:''}${hour}:${minute}:${second}`}if(!data.clearTimer)this.init.call(this);}else{this.endfn();}this.setData({time:time});},formatNum(num){//格式化returnnum9?num:`0${num}`;},endfn(){this.triggerEvent('callback',{});}}})复制代码使用index.json{"navigationBarTitleText":"倒计时","usingComponents":{"count-down":"../count-down/count-down"}}复制代码index.wxmlview倒计时/viewcount-downc-class"red"target"{{targetTime}}"clear-timer"{{clearTimer}}"/count-downview显示天数/viewcount-downc-class"red"target"{{targetTime1}}"show-day"{{true}}"clear-timer"{{clearTimer}}"/count-downview执行回调/viewcount-downc-class"red"target"{{targetTime2}}"show-day"{{true}}"bindcallback"myLinsterner"clear-timer"{{clearTimer}}"/count-downview自定义格式/viewcount-downc-class"red"target"{{targetTime}}"show-day"{{false}}"bindcallback"myLinsterner"format"{{myFormat}}"clear-timer"{{clearTimer}}"/count-downview自定义格式/viewcount-downc-class"red"target"{{targetTime1}}"show-day"{{true}}"format"{{myFormat2}}"clear-timer"{{clearTimer}}"/count-down复制代码index.jsconstappgetApp()Page({data:{targetTime:0,targetTime1:0,targetTime2:0,myFormat:['时','分','秒'],myFormat2:['天','时','分','秒'],clearTimer:false},onLoad:function(){this.setData({targetTime:newDate().getTime()+6430000,targetTime1:newDate().getTime()+1116430000,targetTime2:newDate().getTime()+10000});},onUnload(){this.setData({clearTimer:true});},myLinsterner(){console.log("结束回调")}})复制代码index.wxss/*自定义样式*/.red{color:tomato;}复制代码end