微信小程序实现倒计时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针对DOM的应用实例(一)
Apr 15 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
python 使用值来排序一个字典的方法
2018/11/16 Python
python多线程分块读取文件
2019/08/29 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
Python内置函数及功能简介汇总
2020/10/13 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
团员个人的自我评价
2013/12/02 职场文书
医院领导班子整改方案
2014/10/01 职场文书
市场营销计划书
2015/01/17 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS