微信小程序開發--倒計時60s獲取驗證碼
發布時間：2017-12-26 11:43 所屬欄目：小程序開發教程
本文實例為大家分享了微信小程序倒計時獲取驗證碼的具體代碼，供大家參考，具體內容如下
1、工具類（引用微信小程序提供的工具類）
countdown.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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
class Countdown {constructor(options = {}) {Object.assign(this, {options, })this.__init()}/*** 初始化*/__init() {this.page = getCurrentPages()[getCurrentPages().length - 1]this.setData = this.page.setData.bind(this.page)this.restart(this.options)}/*** 默認參數*/setDefaults() {return {date: `June 7, 2087 15:03:25`, refresh: 1000, offset: 0, onEnd() {}, render(date) {}, }}/*** 合并參數*/mergeOptions(options) {const defaultOptions = this.setDefaults()for (let i in defaultOptions) {if (defaultOptions.hasOwnProperty(i)) {this.options[i] = typeof options[i] !== `undefined` ? options[i] : defaultOptions[i]if (i === `date` && typeof this.options.date !== `object`) {this.options.date = new Date(this.options.date)}if (typeof this.options[i] === `function`) {this.options[i] = this.options[i].bind(this)}}}if (typeof this.options.date !== `object`) {this.options.date = new Date(this.options.date)}}/*** 計算日期差*/getDiffDate() {let diff = (this.options.date.getTime() - Date.now() + this.options.offset) / 1000let dateData = {years: 0,days: 0,hours: 0,min: 0,sec: 0,millisec: 0,}if (diff <= 0) {if (this.interval) {this.stop()this.options.onEnd()}return dateData}if (diff >= (365.25 * 86400)) {dateData.years = Math.floor(diff / (365.25 * 86400))diff -= dateData.years * 365.25 * 86400}if (diff >= 86400) {dateData.days = Math.floor(diff / 86400)diff -= dateData.days * 86400}if (diff >= 3600) {dateData.hours = Math.floor(diff / 3600)diff -= dateData.hours * 3600}if (diff >= 60) {dateData.min = Math.floor(diff / 60)diff -= dateData.min * 60}dateData.sec = Math.round(diff)dateData.millisec = diff % 1 * 1000return dateData}/*** 補零*/leadingZeros(num, length = 2) {num = String(num)if (num.length > length) return numreturn (Array(length + 1).join(`0`) + num).substr(-length)}/*** 更新組件*/update(newDate) {this.options.date = typeof newDate !== `object` ? new Date(newDate) : newDatethis.render()return this}/*** 停止倒計時*/stop() {if (this.interval) {clearInterval(this.interval)this.interval = !1}return this}/*** 渲染組件*/render() {this.options.render(this.getDiffDate())return this}/*** 啟動倒計時*/start() {if (this.interval) return !1this.render()if (this.options.refresh) {this.interval = setInterval(() => {this.render()}, this.options.refresh)}return this}/*** 更新offset*/updateOffset(offset) {this.options.offset = offsetreturn this}/*** 重啟倒計時*/restart(options = {}) {this.mergeOptions(options)this.interval = !1this.start()return this}} |
export default Countdown
2、WXML部分：
|
1
2
3
|
<view class="weui-cell__ft"> <view class="weui-vcode-btn" bindtap="vcode">{{ c2 || '獲取驗證碼' }}</view></view> |
3、JS部分:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
import $wuxCountDown from 'countdown/countdown'export { $wuxCountDown, }import { $wuxCountDown } from '../../components/wux' vcode: function () { if (this.c2 && this.c2.interval) return !1 this.c2 = new $wuxCountDown({ date: +(new Date) + 60000, onEnd() { this.setData({ c2: '重新獲取驗證碼', }) }, render(date) { const sec = this.leadingZeros(date.sec, 2) + ' 秒后重發 ' date.sec !== 0 && this.setData({ c2: sec, }) }, }) } |
以上就是本文的全部內容，希望對大家的學習有所幫助
