微信小程序开发--倒计时60s获取验证码
来源:互联网 发布:入侵数据库消除痕迹 编辑:程序博客网 时间:2024/06/05 15:15
微信小程序开发--倒计时60s获取验证码:
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,
})
},
})
}
阅读全文
1 0
- 微信小程序开发--倒计时60s获取验证码
- 微信小程序开发(3)--倒计时60获取验证码
- jquery 获取验证码倒计时60s
- 常见获取验证码倒计时60s
- 微信小程序获取验证码倒计时
- 微信小程序获取验证码倒计时时间
- 短信获取验证码==倒计时60s
- 获取验证码倒计时60s--前端案例
- 微信小程序 —— 验证码获取倒计时效果
- Android获取验证码后倒计时程序
- Android获取验证码后倒计时程序
- Android获取验证码后倒计时程序
- Android获取验证码后倒计时程序
- iOS 开发获取验证码倒计时
- vue 验证码倒计时60s
- vue 验证码倒计时60s
- vue 验证码倒计时60s
- 获取验证码倒计时
- 物联网平台机智云Android开源框架入门之旅(六)如何修改设备的名字,并且添加描述信息。
- 跳转一个Activity之后如何将栈内其他的Activity全部都销毁
- 【Nova】nova-cert学习
- starUML使用以及出现connect elements exactly的解决办法
- 如何反编译Android APK?这可能是最有效的方法
- 微信小程序开发--倒计时60s获取验证码
- 理解Servlet过滤器(javax.servlet.Filter)
- 伪代码演示servlet的生命周期
- c++默认参数 c++重载
- Python爬虫获取电影链接(续)
- Z-stach Home1.22a 绑定
- BMapLib.MarkerClusterer
- __FILE__,__LINE__
- 1041. Be Unique (20)