【微信小程序】原生小程序，实现简单的倒计时插件

创建插件

 

 

插件代码

• count-down.wxml

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<view class="count-down">   <text class="days" wx:if="{{showDays}}">{{days}}</text>   <text class="spot" wx:if="{{showDays}}">{{spot.days}}</text>       <text class="hours" wx:if="{{showHours}}">{{hours}}</text>   <text class="spot" wx:if="{{showHours}}">{{spot.hours}}</text>       <text class="minutes" wx:if="{{showMinute}}">{{minutes}}</text>   <text class="spot" wx:if="{{showMinute}}">{{spot.minutes}}</text>       <text class="seconds">{{seconds}}</text>   <text class="spot">{{spot.seconds}}</text> </view>

　　> 显示的格式：xx天xx时xx分xx秒，或者 00:00:00:00，更多格式根据需求配置

      > 根据需求配置精确度：天、时、分、秒

 

• count-down.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120

Component({     data: {         timers: false,  // 定时器         days: '00',     // 天         hours: '00',    // 时         minutes: '00',  // 分         seconds: '00',  // 秒         spotList: {     // 倒计时格式，按需配置             1: {                 'days': '：',                 'hours': '：',                 'minutes': '：',                 'seconds': '',             },             2: {                 'days': '天',                 'hours': '时',                 'minutes': '分',                 'seconds': '秒'             }         },     },     properties: {         eTime: {             type: Number,             value: 0         },         spotType: {             type: Number,             value: 1         },         showMinute: {             type: Number,             value: 1         },         showHours: {             type: Number,             value: 1         },         showDays: {             type: Number,             value: 1         },     },     observers: {     },     lifetimes: {         attached() {             this.clockInit();         },         datached() {             clearInterval(this.data.timers);         }     },     methods: {         // 初始化         clockInit() {             var spotList = this.data.spotList,                 spotType = this.data.spotType;             this.setData({                 spot: spotList[spotType],                 showDays: this.data.showDays,                 showHours: this.data.showHours,                 showMinute: this.data.showMinute             });               var secondTime = this.data.eTime;                   this.data.timers = setInterval(() => {                 if (secondTime <= 0) {                     return this.endOfTime()                 }                                   secondTime--;                               this.countDown(secondTime);             }, 1000);                       },         // 倒计时结束         endOfTime() {             clearInterval(this.data.timers);             this.triggerEvent('endOfTime', 1);         },         // 计算时分秒         countDown(secondTime) {                     var seconds = secondTime,                 minutes = 0,                 hours   = 0,                 days    = 0;             if (this.data.showMinute) {                 minutes = Math.floor(seconds / 60);                 seconds = seconds % 60;             }                           if (this.data.showHours) {                 hours = Math.floor(minutes / 60);                 minutes = minutes % 60;             }                           if (this.data.showDays) {                 days = Math.floor(hours / 24);                 hours = hours % 24;             }                           this.setData({                 days: this.zeroFill(days),                 hours: this.zeroFill(hours),                 minutes: this.zeroFill(minutes),                 seconds: this.zeroFill(seconds)             });         },         // 补零         zeroFill(n, type) {             if(type == 's') {               return parseInt(n) < 10 && parseInt(n) >= 0 ? "0" + parseInt(n) : parseInt(n)             }else {               return parseInt(n) < 10 && parseInt(n) >= 0 ? "0" + n : n             }         }     } })

　　

插件使用

• wxml：初始化倒计时秒数、显示格式、倒计时结束触发事件

?

1	<count-down eTime="{{order.count_down}}" bind:endOfTime="endOfTime" showDays="false" showHours="false" wx:if="{{order.count_down > 0}}"/>

• js

?

1 2 3

endOfTime: function (e) {     console.log('endOf   }