微信小程序实现倒计时60s获取验证码
(编辑:jimmy 日期: 2024/11/15 浏览:3 次 )
本文实例为大家分享了微信小程序倒计时获取验证码的具体代码,供大家参考,具体内容如下
1、工具类(引用微信小程序提供的工具类)
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` "htmlcode"><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, }) }, }) }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:微信小程序实现根据字母选择城市功能