小程序倒计时组件实现

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

创建组件conut-down

组件.wxml

<text class="c-class">{{time}}text>
复制代码

组件.js

// count-down/count-down.js
Component({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>倒计时view>
<count-down c-class="red" target="{{targetTime}}"clear-timer="{{clearTimer}}">count-down><view>显示天数view>
<count-down c-class="red" target="{{targetTime1}}"show-day="{{true}}"clear-timer="{{clearTimer}}">count-down><view>执行回调view>
<count-down c-class="red" target="{{targetTime2}}"show-day="{{true}}"bindcallback="myLinsterner"clear-timer="{{clearTimer}}">count-down><view>自定义格式view>
<count-down c-class="red" target="{{targetTime}}"show-day="{{false}}"bindcallback="myLinsterner"format="{{myFormat}}"clear-timer="{{clearTimer}}">count-down><view>自定义格式view>
<count-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;
}
复制代码

end

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！