微信小程序?qū)崿F(xiàn)短信驗(yàn)證碼倒計(jì)時(shí)

更新時(shí)間：2022年05月24日 11:30:35 作者：別等風(fēng)

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)短信驗(yàn)證碼倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)短信驗(yàn)證碼倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下

初始效果

當(dāng)點(diǎn)擊按鈕時(shí)候設(shè)置禁止點(diǎn)擊效果：如下圖

話不多說，直接上代碼

1.wxml部分

<view>
? ? <block wx:if="{{Num==60 || Num==-1}}">
? ? ? <button bindtap="countDown">獲取驗(yàn)證碼</button>
? ? </block>
? ? <block wx:else>
? ? ? <button disabled='{{isDisabled}}'>{{Num}}s后重新發(fā)送</button>
? ? </block>
</view>

2.js部分

// pages/push1/push1.js
Page({

? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? timer: "",
? ? Num: '60',?
? ? isDisabled:false
? },
?/**
? ?* 驗(yàn)證碼倒計(jì)時(shí)
? ?*/
? countDown: function() {
? ? var that=this
? ? var Num=that.data.Num
? ? var isDisabled=this.data.isDisabled
? ? var timer=setInterval(function(){
? ? ? ? Num-=1;
? ? ? ? that.setData({
? ? ? ? ? Num:Num,
? ? ? ? ? isDisabled:true
? ? ? ? })
? ? ? ? if(Num<=-1){
? ? ? ? ? clearInterval(timer)
? ? ? ? ? that.setData({
? ? ? ? ? ? Num:60,
? ? ? ? ? ? isDisabled:false
? ? ? ? ? })
? ? ? ? }
? ? },100)
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
? ?*/
? onLoad: function (options) {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
? ?*/
? onReady: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
? ?*/
? onShow: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
? ?*/
? onHide: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
? ?*/
? onUnload: function () {

? },

? /**
? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function () {

? },

? /**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {

? },

? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage: function () {

? }
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: