微信小程序实现倒计时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面向对象之this关键词用法分析
Jan 13 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
微信小程序模板(template)使用详解
Jan 31 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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 文章调用类代码
2011/08/11 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
浅析vue数据绑定
2017/01/17 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python字符串下标与切片及使用方法
2020/02/13 Python
Python中无限循环需要什么条件
2020/05/27 Python
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
生日派对邀请函
2014/01/13 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
师德师风剖析材料
2014/09/30 职场文书
2014年保卫工作总结
2014/12/05 职场文书
新教师教学工作总结
2015/08/12 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP