微信小程序实现倒计时60s获取验证码

前端之家收集整理的这篇文章主要介绍了微信小程序实现倒计时60s获取验证码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1、工具类(引用微信小程序提供的工具类)

countdown.js

= (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部分:

获取验证码' }}

3、JS部分:

获取验证码',}) },render(date) { const sec = this.leadingZeros(date.sec,2) + ' 秒后重发 ' date.sec !== 0 && this.setData({ c2: sec,}) }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/weapp/37090.html

猜你在找的微信小程序相关文章