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

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'

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.}