效果传送门至 小程序代码片段
创建组件conut-down
组件.wxml
!--count-down/count-down.wxml--text class="c-class"{{time}}/text复制代码组件.js
| 参 | 类型 | 说明 |
|---|---|---|
| target | Number | // 结束时间 |
| showDay | Boolean | // 是否显示天 |
| callback | String | // 回调 |
| format | Array | // 自定义格式 |
| clearTimer | Boolean | // 清除定时器 |
// 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 () { const self = this; setTimeout(function () { self.getLastTime.call(self); }, 1000); }, getFormat () { const data = this.data; if (data.format.length === 3) data.format.splice(0, 0, ''); this.getLastTime(); }, getLastTime () { const data = this.data; const gapTime = Math.ceil((data.target - new Date().getTime()) / 1000);// 距离结束还有多少秒 let time = '00:00:00'; let day = '00'; const format = data.format; if (gapTime 0) { day = this.formatNum(parseInt(gapTime / 86400)); // 天 let lastTime = gapTime % 86400; const hour = this.formatNum(parseInt(lastTime / 3600)); // 时 lastTime = lastTime % 3600; const minute = this.formatNum(parseInt(lastTime / 60)); // 分 const second = this.formatNum(lastTime % 60); // 秒 if (data.format.length 0) {// 自定义格式处理 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) {// 格式化 return num 9 ? num : `0${num}`; }, endfn () { this.triggerEvent('callback', {}); } }})复制代码使用
index.json
{ "navigationBarTitleText": "倒计时", "usingComponents": { "count-down": "../count-down/count-down" }}复制代码index.wxml
view倒计时/viewcount-down c-class="red" target="{{targetTime}}" clear-timer="{{clearTimer}}" /count-downview显示天数/viewcount-down c-class="red" target="{{targetTime1}}" show-day="{{true}}" clear-timer="{{clearTimer}}" /count-downview执行回调/viewcount-down c-class="red" target="{{targetTime2}}" show-day="{{true}}" bindcallback="myLinsterner" clear-timer="{{clearTimer}}" /count-down view自定义格式/viewcount-down c-class="red" target="{{targetTime}}" show-day="{{false}}" bindcallback="myLinsterner" format="{{myFormat}}" clear-timer="{{clearTimer}}" /count-downview自定义格式/viewcount-down c-class="red" target="{{targetTime1}}" show-day="{{true}}" format="{{myFormat2}}" clear-timer="{{clearTimer}}" /count-down复制代码index.js
const app = getApp()Page({ data: { targetTime: 0, targetTime1: 0, targetTime2: 0, myFormat: ['时', '分', '秒'], myFormat2: ['天', '时', '分', '秒'], clearTimer: false }, onLoad: function () { this.setData({ targetTime: new Date().getTime() + 6430000, targetTime1: new Date().getTime() + 1116430000, targetTime2: new Date().getTime() + 10000 }); }, onUnload() { this.setData({ clearTimer: true }); }, myLinsterner () { console.log("结束回调") }})复制代码index.wxss
/* 自定义样式 */.red { color: tomato;}复制代码
