微信小程序实现倒计时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_13_执行模型详解
Oct 20 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
jQuery 插件开发指南
Nov 14 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 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
用php和MySql来与ODBC数据连接
2006/10/09 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
深入理解python try异常处理机制
2016/06/01 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
室内设计专业个人的自我评价
2013/10/19 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
手机银行营销方案
2014/03/14 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
健康教育主题班会
2015/08/14 职场文书
创业计划书之服装
2019/10/07 职场文书
用python实现监控视频人数统计
2021/05/21 Python
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis
HttpClient实现表单提交上传文件
2022/08/14 Java/Android