微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
本文實(shí)例為大家分享了微信小程序倒計(jì)時(shí)獲取驗(yàn)證碼的具體代碼,供大家參考,具體內(nèi)容如下
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)
}
/**
* 默認(rèn)參數(shù)
*/
setDefaults() {
return {
date: `June 7, 2087 15:03:25`,
refresh: 1000,
offset: 0,
onEnd() {},
render(date) {},
}
}
/**
* 合并參數(shù)
*/
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)
}
}
/**
* 計(jì)算日期差
*/
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
}
/**
* 補(bǔ)零
*/
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
}
/**
* 停止倒計(jì)時(shí)
*/
stop() {
if (this.interval) {
clearInterval(this.interval)
this.interval = !1
}
return this
}
/**
* 渲染組件
*/
render() {
this.options.render(this.getDiffDate())
return this
}
/**
* 啟動(dòng)倒計(jì)時(shí)
*/
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
}
/**
* 重啟倒計(jì)時(shí)
*/
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 || '獲取驗(yàn)證碼' }}</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: '重新獲取驗(yàn)證碼',
})
},
render(date) {
const sec = this.leadingZeros(date.sec, 2) + ' 秒后重發(fā) '
date.sec !== 0 && this.setData({
c2: sec,
})
},
})
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 倒計(jì)時(shí)組件實(shí)現(xiàn)代碼
- 微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
- 微信小程序倒計(jì)時(shí)功能實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)團(tuán)購(gòu)或秒殺批量倒計(jì)時(shí)
- 微信小程序顯示倒計(jì)時(shí)功能示例【測(cè)試可用】
- 微信小程序倒計(jì)時(shí)功能實(shí)現(xiàn)代碼
- 詳解微信小程序用定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果
- 微信小程序中顯示倒計(jì)時(shí)代碼實(shí)例
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)功能
- 微信小程序?qū)崿F(xiàn)答題倒計(jì)時(shí)
相關(guān)文章
JS實(shí)現(xiàn)的哈夫曼編碼示例【原始版與修改版】
這篇文章主要介紹了JS實(shí)現(xiàn)的哈夫曼編碼,結(jié)合實(shí)例形式分析了基于JavaScript定義、使用哈夫曼樹進(jìn)行編碼、解碼等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
20行代碼實(shí)現(xiàn)的一個(gè)CSS覆蓋率測(cè)試腳本
這里我們只求CSS規(guī)則的覆蓋率,所以訪問 querySelectorAll().length 即可。通過排序就可看出各個(gè)CSS使用情況2013-07-07
JS實(shí)現(xiàn)數(shù)組扁平化的方法總結(jié)
數(shù)組扁平化相信不少朋友在一些面試中被問到過,這在我們?nèi)粘>幊讨幸彩且粋€(gè)常規(guī)操作,它需要我們將一個(gè)多維數(shù)組轉(zhuǎn)化成一個(gè)一維數(shù)組,所以,借著這篇文章,我們今天就一起來匯總一下幾種數(shù)組扁平化的方式,需要的朋友可以參考下2024-02-02
JavaScript對(duì)象解構(gòu)的用法實(shí)例解析
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z(yǔ)法將數(shù)組和對(duì)象的屬性賦給各種變量,下面這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象解構(gòu)用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
JavaScript點(diǎn)擊按鈕后彈出透明浮動(dòng)層的方法
這篇文章主要介紹了JavaScript點(diǎn)擊按鈕后彈出透明浮動(dòng)層的方法,可實(shí)現(xiàn)點(diǎn)擊按鈕彈出居中的透明浮動(dòng)層的效果,涉及javascript操作鼠標(biāo)事件及頁(yè)面樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05
js es6系列教程 - 基于new.target屬性與es5改造es6的類語(yǔ)法
下面小編就為大家?guī)硪黄猨s es6系列教程 - 基于new.target屬性與es5改造es6的類語(yǔ)法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09

