微信小程序开发--倒计时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, }) }, }) } |
以上就是本文的全部内容，希望对大家的学习有所帮助
