微信小程序实现倒计时60s获取验证码

本文实例为大家分享了微信小程序倒计时获取验证码的具体代码，供大家参考，具体内容如下

1、工具类（引用微信小程序提供的工具类）

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,
 })
 },
 })
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# 微信小程序倒计时验证码  # 微信小程序倒计时60s获取验证码  # 微信小程序验证码  # 微信小程序 倒计时组件实现代码  # 微信小程序动态显示项目倒计时效果  # 微信小程序倒计时功能实例代码  # 微信小程序实现团购或秒杀批量倒计时  # 微信小程序显示倒计时功能示例【测试可用】  # 微信小程序倒计时功能实现代码  # 详解微信小程序用定时器实现倒计时效果  # 微信小程序中显示倒计时代码实例  # 微信小程序实现倒计时功能  # 微信小程序实现答题倒计时  # 倒计时  # 验证码  # 重启  # 大家分享  # 具体内容  # 大家多多  # 重发  # refresh  # setDefaults  # restart  # return  # June  # date  # offset  # undefined  # typeof  # object  # amp  # hasOwnProperty  # render 

相关文章： 西安专业网站制作公司有哪些,陕西省建行官方网站？  如何访问已购建站主机并解决登录问题？  ,制作一个手机app网站要多少钱？  临沂网站制作企业,临沂第三中学官方网站？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  无锡制作网站公司有哪些,无锡优八网络科技有限公司介绍？  ppt在线制作免费网站推荐,有什么下载免费的ppt模板网站？  建站之星CMS建站配置指南：模板选择与SEO优化技巧  怀化网站制作公司,怀化新生儿上户网上办理流程？  已有域名如何免费搭建网站？  Python如何创建带属性的XML节点  官网自助建站平台指南：在线制作、快速建站与模板选择全解析  高防服务器租用如何选择配置与防御等级？  如何使用Golang table-driven基准测试_多组数据测量函数效率  小建面朝正北，A点实际方位是否存在偏差？  Bpmn 2.0的XML文件怎么画流程图  如何在阿里云购买域名并搭建网站？  广州商城建站系统开发成本与周期如何控制？  如何通过VPS搭建网站快速盈利？  如何在阿里云高效完成企业建站全流程？  贸易公司网站制作流程,出口贸易网站设计怎么做？  如何挑选高效建站主机与优质域名？  c++怎么使用类型萃取type_traits_c++ 模板元编程类型判断【方法】  在线制作视频的网站有哪些,电脑如何制作视频短片？  网页设计网站制作软件,microsoft office哪个可以创建网页？  简历在线制作网站免费版,如何创建个人简历？  如何快速生成可下载的建站源码工具？  海南网站制作公司有哪些,海口网是哪家的？  如何通过虚拟主机快速搭建个人网站？  5种Android数据存储方式汇总  网站专业制作公司有哪些,做一个公司网站要多少钱？  香港服务器WordPress建站指南：SEO优化与高效部署策略  建站之星价格显示格式升级，你的预算足够吗？  如何批量查询域名的建站时间记录？  建站之星备案是否影响网站上线时间？  官网建站费用明细查询_企业建站套餐价格及收费标准指南  如何通过FTP服务器快速搭建网站？  制作宣传网站的软件,小红书可以宣传网站吗？  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  制作网站的模板软件,网站怎么建设？  建站上市公司网站建设方案与SEO优化服务定制指南  C#怎么创建控制台应用 C# Console App项目创建方法  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  c# 服务器GC和工作站GC的区别和设置  湖北网站制作公司有哪些,湖北清能集团官网？  高性能网站服务器配置指南：安全稳定与高效建站核心方案  建站主机是否等同于虚拟主机？  XML的“混合内容”是什么 怎么用DTD或XSD定义  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？