微信小程序开发--倒计时60s获取验证码
| 微信小程序开发--倒计时60s获取验证码开发教程:小程序 一、工具类（引用微信小程序提供的工具类）微信小程序
countdown.js微信
44.
53.
61.
68.
72.
76.
80.
84.
85.
86.
88.
96.
104.
114.
121.
134.
141.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.}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) / 1000let dateData = {
54.years: 0,
55.days: 0,
56.hours: 0,
57.min: 0,
58.sec: 0,
59.millisec: 0,
60.}if (diff <= 0) {
62.if (this.interval) {
63.this.stop()
64.this.options.onEnd()
65.}
66.return dateData
67.}if (diff >= (365.25 * 86400)) {
69.dateData.years = Math.floor(diff / (365.25 * 86400))
70.diff -= dateData.years * 365.25 * 86400
71.}if (diff >= 86400) {
73.dateData.days = Math.floor(diff / 86400)
74.diff -= dateData.days * 86400
75.}if (diff >= 3600) {
77.dateData.hours = Math.floor(diff / 3600)
78.diff -= dateData.hours * 3600
79.}if (diff >= 60) {
81.dateData.min = Math.floor(diff / 60)
82.diff -= dateData.min * 60
83.}dateData.sec = Math.round(diff)dateData.millisec = diff % 1 * 1000return dateData
87.}/**
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.}/**
97.* 更新组件
98.*/
99.update(newDate) {
100.this.options.date = typeof newDate !== `object` ? new Date(newDate) : newDate
101.this.render()
102.return this
103.}/**
105.* 中止倒计时
106.*/
107.stop() {
108.if (this.interval) {
109.clearInterval(this.interval)
110.this.interval = !1
111.}
112.return this
113.}/**
115.* 渲染组件
116.*/
117.render() {
118.this.options.render(this.getDiffDate())
119.return this
120.}/**
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.}/**
135.* 更新offset
136.*/
137.updateOffset(offset) {
138.this.options.offset = offset
139.return this
140.}/**
142.* 重启倒计时
143.*/
144.restart(options = {}) {
145.this.mergeOptions(options)
146.this.interval = !1
147.this.start()
148.return this
149.}
150.} export default Countdownapp 2，WXML部分：ide 1.<view class="weui-cell__ft">
2.<view class="weui-vcode-btn" bindtap="vcode">{{ c2 || '获取验证码' }}</view>
3.</view> 3，JS部分:工具
6.1.import $wuxCountDown from 'countdown/countdown'
2.export {
3.$wuxCountDown,
4.}
5.import { $wuxCountDown } from '../../components/wux'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.} |
