微信小程序实现倒计时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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
node.js如何自定义实现一个EventEmitter
Jul 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目录与文件操作
2011/12/30 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
vue引入jq插件的实例讲解
2017/09/12 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
Python md5与sha1加密算法用法分析
2017/07/14 Python
Python探索之创建二叉树
2017/10/25 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
python3.x实现base64加密和解密
2019/03/28 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
办公室保洁员岗位职责
2013/12/02 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
公司门卫岗位职责
2014/03/15 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
高温慰问简报
2015/07/21 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
python_tkinter弹出对话框创建
2022/03/20 Python
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL