微信小程序開發--倒計時60s獲取驗證碼
發布(bu)時間(jian)：2017-12-26 11:43 所屬欄目：小程序開發教程
本文實例為大(da)(da)家(jia)分享了(le)微(wei)信小(xiao)程序(xu)倒計時獲取驗證碼(ma)的具(ju)體(ti)代碼(ma)，供大(da)(da)家(jia)參考，具(ju)體(ti)內容(rong)如(ru)下
1、工(gong)具類（引用(yong)微信小程序提供的工(gong)具類）
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部分(fen)：
|
1
2
3
|
<view class="weui-cell__ft"> <view class="weui-vcode-btn" bindtap="vcode">{{ c2 || '獲取驗證碼' }}</view></view> |
3、JS部分(fen):
|
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, }) }, }) } |
以上就是本文(wen)的(de)全部內容，希望對大家的(de)學習有所幫助
易優小程序(xu)（企(qi)業版(ban)）+靈活api+前(qian)后(hou)代碼(ma)開源
碼云倉庫(ku):
本文地址：//www.jinyoudianli.com/wxmini/doc/course/18250.html 復制鏈接
如需定(ding)制(zhi)請聯系易(yi)優客服咨詢：
