微信小程序實現短信驗證碼倒計時
本文實例為大傢分享瞭微信小程序實現短信驗證碼倒計時的具體代碼，供大傢參考，具體內容如下
初始效果
當點擊按鈕時候設置禁止點擊效果：如下圖
話不多說，直接上代碼
1.wxml部分
<view>
<block wx:if="{{Num==60 || Num==-1}}">
<button bindtap="countDown">獲取驗證碼</button>
</block>
<block wx:else>
<button disabled='{{isDisabled}}'>{{Num}}s後重新發送</button>
</block>
</view>
2.js部分
// pages/push1/push1.js
Page({
/**
* 頁面的初始數據
*/
data: {
timer: "",
Num: '60',
isDisabled:false
},
/**
* 驗證碼倒計時
*/
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)
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。
推薦閱讀：
- 詳解微信小程序應用和頁面生命周期
- 微信小程序實現購物車選擇規格顏色效果
- 微信小程序輪播圖自定義光標位置
- 微信小程序picker多列選擇器(mode = multiSelector)
- 微信小程序實現拼圖遊戲