微信小程序開發(fā)--倒計(jì)時(shí)60s獲取驗(yàn)證碼
發(fā)布時(shí)間：2017-12-26 11:43 所屬欄目：小程序開發(fā)教程
本文實(shí)例為大家分享了微信小程序倒計(jì)時(shí)獲取驗(yàn)證碼的具體代碼，供大家參考，具體內(nèi)容如下
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)}/*** 默認(rèn)參數(shù)*/setDefaults() {return {date: `June 7, 2087 15:03:25`, refresh: 1000, offset: 0, onEnd() {}, render(date) {}, }}/*** 合并參數(shù)*/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)}}/*** 計(jì)算日期差*/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}/*** 補(bǔ)零*/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}/*** 停止倒計(jì)時(shí)*/stop() {if (this.interval) {clearInterval(this.interval)this.interval = !1}return this}/*** 渲染組件*/render() {this.options.render(this.getDiffDate())return this}/*** 啟動(dòng)倒計(jì)時(shí)*/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}/*** 重啟倒計(jì)時(shí)*/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 || '獲取驗(yàn)證碼' }}</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: '重新獲取驗(yàn)證碼', }) }, render(date) { const sec = this.leadingZeros(date.sec, 2) + ' 秒后重發(fā) ' date.sec !== 0 && this.setData({ c2: sec, }) }, }) } |
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉(cāng)庫(kù):
本文地址：http://www.xiuhaier.com/wxmini/doc/course/18250.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
