找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索本站精品资源

搜索

首页 › 教程频道› 小程序开发 › 查看内容

微信小程序开发--倒计时60s获取验证码

作者：模板之家 2017-12-26 11:42 8464人关注

本文实例为大家分享了微信小程序倒计时获取验证码的具体代码，供大家参考，具体内容如下 1、工具类（引用微信小程序提供的工具类） countdown.js ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

本文实例为大家分享了微信小程序倒计时获取验证码的具体代码，供大家参考，具体内容如下

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) / 1000
let 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 * 1000
return dateData
}
/**
* 补零
*/
leadingZeros(num, length = 2) {
num = String(num)
if (num.length > length) return num
return (Array(length + 1).join(`0`) + num).substr(-length)
}
/**
* 更新组件
*/
update(newDate) {
this.options.date = typeof newDate !== `object` ? new Date(newDate) : newDate
this.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 !1
this.render()
if (this.options.refresh) {
this.interval = setInterval(() => {
this.render()
}, this.options.refresh)
}
return this
}
/**
* 更新offset
*/
updateOffset(offset) {
this.options.offset = offset
return this
}
/**
* 重启倒计时
*/
restart(options = {}) {
this.mergeOptions(options)
this.interval = !1
this.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,
 })
 },
 })
 }

以上就是本文的全部内容，希望对大家的学习有所帮助

路过
雷人
握手
鲜花
鸡蛋
原作者: 模板之家 来自: 网络收集
上一篇：微信小程序+OLAMI自然语言API接口制作智能查询工具--快递、聊天、日历等
下一篇：微信小程序解密微信运动数据

全部回复(0)

Copyright © Comsenz Inc. Powered by Discuz!X3.5 蜀ICP备12013697号
微信：xu08290201 QQ：75283535