微信小程序?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, }) }, }) }
以上就是本文的全部內(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)購或秒殺批量倒計(jì)時(shí)
- 微信小程序顯示倒計(jì)時(shí)功能示例【測試可用】
- 微信小程序倒計(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)文章
詳解CocosCreator優(yōu)化之DrawCall
這篇文章主要介紹了CocosCreator中DrawCall的優(yōu)化,想研究游戲性能的同學(xué),一定要看一看2021-04-04JavaScript DOM實(shí)現(xiàn)簡單留言板
這篇文章主要為大家詳細(xì)介紹了JavaScript DOM實(shí)現(xiàn)簡單留言板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01JS中循環(huán)遍歷數(shù)組的四種方式總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JS中循環(huán)遍歷數(shù)組的四種方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01Bootstrap CSS組件之按鈕組(btn-group)
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之按鈕組(btn-group),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12bootstrap 路徑導(dǎo)航 分頁 進(jìn)度條的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了bootstrap 路徑導(dǎo)航 分頁 進(jìn)度條的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08JavaScript 網(wǎng)頁中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒數(shù)計(jì)時(shí)程序
這篇文章主要介紹了JavaScript 網(wǎng)頁中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒數(shù)計(jì)時(shí)程序,需要的朋友可以參考下2017-01-01