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


Posted in Javascript onApril 17, 2020

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 #Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 #Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 #Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 #Javascript
微信小程序自定义组件
Aug 16 #Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 #Javascript
微信小程序多列选择器range-key使用详解
Mar 30 #Javascript
You might like
PHPCMS的使用小结
2010/09/20 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
PHP7 弃用功能
2021/03/09 PHP
微信小程序(三):网络请求
2017/01/13 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
Vue2.0权限树组件实现代码
2017/08/29 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
python如何统计序列中元素
2020/07/31 Python
python绘制中国大陆人口热力图
2018/11/07 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
python异常触发及自定义异常类解析
2019/08/06 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
python SOCKET编程基础入门
2021/02/27 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
亲子读书活动方案
2014/02/22 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
淮海战役观后感
2015/06/11 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android