倒计时一般有hh:mm:ss和mm两种格式的倒计时 写法一、es6 1、声明类Timer /**
类说明@class Timer@constructor / export default class Timer { /* http请求@constructor@param {Object} count： 计时数量， 默认60 progress： 计时进度事件 complete： 计时结束事件 @return {Number} / constructor (options) { this.options = options this.count = options.count || 60 this.setIntervalNum = null return this.start() } // 倒计时入口 start () { this.setIntervalNum = window.setInterval(() => { this.enterFrame() }, 1000) this.enterFrame() return this } // 开始倒计时 enterFrame () { this.count– if (this.options.progress) this.options.progress(this.count) if (this.count == 0) { if (this.options.complete) this.options.complete() this.stop() } } // 停止倒计时 stop () { window.clearInterval(this.setIntervalNum) } } 2、使用new Timer 用法1、60s倒计时 this.countdown = new Timer({ count: 60, progress: (num) => { this.timer = num; } }); } if (this.timerOk && this.countdown) { this.countdown.stop(); this.timer = 0; } 用法2、hh:mm:ss 格式倒计时 this.timerDown && this.timerDown.stop(); this.timerDown = new Timer({ count: time, progress: res => { const min = Math.floor(res % 3600); this.hh = Math.floor(res / 3600) < 10 ? “0” + Math.floor(res / 3600) : Math.floor(res / 3600); this.mm = Math.floor(min / 60) < 10 ? “0” + Math.floor(min / 60) : Math.floor(min / 60); this.ss = res % 60 < 10 ? “0” + res % 60 : res % 60; if (this.hh === “00” && this.mm === “00” && this.ss === “00”) { } }, complete: () => { // 定时器结束 } }); 写法二、10s倒计时 1、定义公用方法 // 时间转化为毫秒 function remainFormatDuring (mss) { let timeObj = {} timeObj.days = parseInt(mss/(1000 * 60 * 60 * 24)) timeObj.hours = parseInt((mss%(1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) timeObj.minutes = parseInt((mss%(1000 * 60 * 60)) / (1000 * 60 * 60)) timeObj.seconds = parseInt((mss%(1000 * 60)) / 1000) if (timeObj.hours < 10) { timeObj.hours = ‘0’ + timeObj.hours } if (timeObj.minutes < 10) { timeObj.minutes = ‘0’ + timeObj.minutes } if (timeObj.seconds < 10) { timeObj.seconds = ‘0’ + timeObj.seconds } let date = new Date(mss) timeObj.minsec = date.getMilliseconds return timeObj } 2、使用 Page({ data: { countDown: 10, // 倒计时10s TIMEOUT_TIMMER: null, timeout: 0 }, onLoad: function() { // 诸葛埋码 new App.global.ZhugeTrack().trackPage(‘限流页’, ‘性能’, ‘无’,{},true); this.setTimeDown(this.data.countDown) }, onShow: function() { }, onUnload:function () { this.clearTime() // 清除定时器 }, // 返回上一页 goBack () { App.href({ type:‘navigateBack’, data:{delta:1} }) }, setTimeDown (time) { this.setData({ timeout: time * 1000 }) let that = this this.clearTime() this.TIMEOUT_TIMMER = setInterval(() => { that.setData({ timeout: Math.max(0, that.data.timeout - 1000) }) let time = Util.remainFormatDuring(that.data.timeout) // 公用方法时间转化为毫秒 let day = parseInt(time.days) let hours = time.hours let minutes = time.minutes let seconds = time.seconds that.setData({ countDown: parseInt((day246060) + (hours6060) + (minutes*60) + seconds) }) if (that.data.timeout <= 0) { that.clearTime() // 清除定时器 } }, 1000); }, // 清除定时器 clearTime () { if (this.TIMEOUT_TIMMER) { clearInterval(this.TIMEOUT_TIMMER) } } })