微信小程序实现倒计时60s获取验证码
程序员文章站
2022-05-14 19:11:37
本文实例为大家分享了微信小程序倒计时获取验证码的具体代码,供大家参考,具体内容如下
1、工具类(引用微信小程序提供的工具类)
countdown.js...
本文实例为大家分享了微信小程序倒计时获取验证码的具体代码,供大家参考,具体内容如下
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` ? 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, }) }, }) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 详谈表单重复提交的三种情况及解决方法