微信小程序实现倒计时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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
详解jenkins自动化部署vue
May 14 Javascript
原生JS实现汇率转换功能代码实例
May 13 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python二维键值数组生成转json的例子
2019/12/06 Python
python实现串口通信的示例代码
2020/02/10 Python
什么是Python中的匿名函数
2020/06/02 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
税务干部鉴定材料
2014/02/11 职场文书
公司合作协议范文
2014/10/01 职场文书
身份证丢失证明
2015/06/19 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
python状态机transitions库详解
2021/06/02 Python
python not运算符的实例用法
2021/06/30 Python
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
详解Python中*args和**kwargs的使用
2022/04/07 Python
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python