### [微信小程序中获取验证码倒计时60s的实例分析](https://www.prosaas.cn/article/17604)

**Published:** 2018-05-15T07:39:35

**Author:** 5201314

**Excerpt:** 这篇文章主要为大家详细介绍了微信小程序实现倒计时60s获取验证码，具有一定的参考价值，感兴趣的小伙伴们可以参考…

这篇文章主要为大家详细介绍了微信小程序实现倒计时60s获取验证码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

1、工具类（引用微信小程序提供的工具类）

![](https://img.php.cn/upload/article/000/000/194/ff95197e785c7bf3177cca4de5e123a7-0.jpg)

countdown.js

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部分：

<view class="weui-cell\_\_ft">
 <view class="weui-vcode-btn" bindtap="vcode">{{ c2 || '获取验证码' }}</view>
</view>

3、JS部分:

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,
 })
 },
 })
 }

以上就是微信小程序中获取验证码倒计时60s的实例分析的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** default, JS, 微信小程序

**Categories:** 后端开发

---