微信小程序开发--倒计时60s获取验证码-优快云博客

本文介绍如何在微信小程序中实现获取验证码后的60秒倒计时功能，通过自定义Countdown类，设置倒计时结束后的回调及渲染方法，最终实现验证码倒计时效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序开发--倒计时60s获取验证码开发教程:

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

countdown.js

1.class Countdown {
 2.constructor(options = {}) {
 3.Object.assign(this, {
 4.options, 
 5.})
 6.this.__init()
 7.}
 8./**
 9.* 初始化
 10.*/
 11.__init() {
 12.this.page = getCurrentPages()[getCurrentPages().length - 1]
 13.this.setData = this.page.setData.bind(this.page)
 14.this.restart(this.options)
 15.}
 16./**
 17.* 默认参数
 18.*/
 19.setDefaults() {
 20.return {
 21.date: `June 7, 2087 15:03:25`, 
 22.refresh: 1000, 
 23.offset: 0, 
 24.onEnd() {}, 
 25.render(date) {}, 
 26.}
 27.}
 28./**
 29.* 合并参数
 30.*/
 31.mergeOptions(options) {
 32.const defaultOptions = this.setDefaults()
 33.for (let i in defaultOptions) {
 34.if (defaultOptions.hasOwnProperty(i)) {
 35.this.options[i] = typeof options[i] !== `undefined` ? options[i] : defaultOptions[i]
 36.if (i === `date` && typeof this.options.date !== `object`) {
 37.this.options.date = new Date(this.options.date)
 38.}
 39.if (typeof this.options[i] === `function`) {
 40.this.options[i] = this.options[i].bind(this)
 41.}
 42.}
 43.}
 44.if (typeof this.options.date !== `object`) {
 45.this.options.date = new Date(this.options.date)
 46.}
 47.}
 48./**
 49.* 计算日期差
 50.*/
 51.getDiffDate() {
 52.let diff = (this.options.date.getTime() - Date.now() + this.options.offset) / 1000
 53.let dateData = {
 54.years: 0,
 55.days: 0,
 56.hours: 0,
 57.min: 0,
 58.sec: 0,
 59.millisec: 0,
 60.}
 61.if (diff <= 0) {
 62.if (this.interval) {
 63.this.stop()
 64.this.options.onEnd()
 65.}
 66.return dateData
 67.}
 68.if (diff >= (365.25 * 86400)) {
 69.dateData.years = Math.floor(diff / (365.25 * 86400))
 70.diff -= dateData.years * 365.25 * 86400
 71.}
 72.if (diff >= 86400) {
 73.dateData.days = Math.floor(diff / 86400)
 74.diff -= dateData.days * 86400
 75.}
 76.if (diff >= 3600) {
 77.dateData.hours = Math.floor(diff / 3600)
 78.diff -= dateData.hours * 3600
 79.}
 80.if (diff >= 60) {
 81.dateData.min = Math.floor(diff / 60)
 82.diff -= dateData.min * 60
 83.}
 84.dateData.sec = Math.round(diff)
 85.dateData.millisec = diff % 1 * 1000
 86.return dateData
 87.}
 88./**
 89.* 补零
 90.*/
 91.leadingZeros(num, length = 2) {
 92.num = String(num)
 93.if (num.length > length) return num
 94.return (Array(length + 1).join(`0`) + num).substr(-length)
 95.}
 96./**
 97.* 更新组件
 98.*/
 99.update(newDate) {
 100.this.options.date = typeof newDate !== `object` ? new Date(newDate) : newDate
 101.this.render()
 102.return this
 103.}
 104./**
 105.* 停止倒计时
 106.*/
 107.stop() {
 108.if (this.interval) {
 109.clearInterval(this.interval)
 110.this.interval = !1
 111.}
 112.return this
 113.}
 114./**
 115.* 渲染组件
 116.*/
 117.render() {
 118.this.options.render(this.getDiffDate())
 119.return this
 120.}
 121./**
 122.* 启动倒计时
 123.*/
 124.start() {
 125.if (this.interval) return !1
 126.this.render()
 127.if (this.options.refresh) {
 128.this.interval = setInterval(() => {
 129.this.render()
 130}, this.options.refresh)
 131.}
 132.return this
 133.}
 134./**
 135.* 更新offset
 136.*/
 137.updateOffset(offset) {
 138.this.options.offset = offset
 139.return this
 140.}
 141./**
 142.* 重启倒计时
 143.*/
 144.restart(options = {}) {
 145.this.mergeOptions(options)
 146.this.interval = !1
 147.this.start()
 148.return this
 149.}
 150.}

export default Countdown

2，WXML部分：

1.<view class="weui-cell__ft">
 2.<view class="weui-vcode-btn" bindtap="vcode">{{ c2 || '获取验证码' }}</view>
 3.</view>

3，JS部分:

1.import $wuxCountDown from 'countdown/countdown'
 2.export {
 3.$wuxCountDown, 
 4.}
 5.import { $wuxCountDown } from '../../components/wux'
 6.vcode: function () {
 7.if (this.c2 && this.c2.interval) return !1
 8.this.c2 = new $wuxCountDown({
 9.date: +(new Date) + 60000,
 10.onEnd() {
 11.this.setData({
 12.c2: '重新获取验证码',
 13.})
 14.},
 15.render(date) {
 16.const sec = this.leadingZeros(date.sec, 2) + ' 秒后重发 '
 17.date.sec !== 0 && this.setData({
 18.c2: sec,
 19.})
 20.},
 21.})
 22.}

转载于:https://my.oschina.net/u/3396785/blog/1476894