小程序如何實現驗證碼倒計時

獲取驗證碼界面

實現功能:

? ?????點擊發送驗證碼,發送按鈕進入倒計時狀態。

具體實現:

????????要實現JS的倒計時功能,首先要了解兩個JS的定時器方法。setTimeout 和?setInterval。兩個方法都是延遲一段時間后執行某個操作。區別是setTimeout執行完后會停止,setInterval會一直執行。

? ? ? ? 兩個方法的使用:setTimeout(code,millisec)?setInterval(code,millisec)。其中code是執行的操作,可以是function,可以是個函數名。milisec是延遲的時間,單位是毫秒。如果想讓setTimeout方法一直執行,可以在setTimeout的執行函數中繼續調用setTimeout。而setInterval會一直執行,直到你調用了clearInterval()方法,setInterval的返回值定時器id,可以作為clearInterval的參數。

? ? ? ? 然后就是倒計時小程序的實現:UI就不寫了,大家根據自己的需求來做,至于布局,flex就完事了。

????????然后是獲取驗證碼的fuction:

data: {

? ? buttonDisable: false,? ????????????????? //倒計時是否不可用

? ? phone: null,? ? ? ? ? ? ? ? ? ????????????????//電話號碼??

? ? buttonTitle: '獲取驗證碼',? ? ? ? ? ? ?//按鈕標題

? ? code: null? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //驗證碼

? },

getVerifyCode() {

? ? if (this.data.buttonDisable) return false;? ? ? ? //倒計時狀態不可點擊

? ? var phone = this.data.phone;

? ? var regMobile = /^1\d{10}$/;? ? ? ? //電話正則

? ? if (!regMobile.test(phone)) {

? ? ? wx.showToast({

? ? ? ? title: '手機號有誤',

? ? ? ? icon: 'none'

? ? ? })

? ? ? return false;

? ? }

? ? var that = this;

?wx.request({

? ? url: '獲取驗證碼url',

????success(res){

? ? ????this.getCodeSuccess()? ? ? ? //處理獲取code成功

????},

????fail(error){

????????this.getCodeFail()? ? ? ? ? ? ? ? //處理獲取code失敗

????}

})

getCodeSuccess(){

????var intervalId = setInterval(function () {?

????????count -= 1;

????????that.setData({

????????????buttonTitle: count + 's后重發',?

????????????buttonDisable: true

????????})?

????????if (count == 0) {

????????????clearInterval(intervalId);? ? ? ? ? ? ? ? ?//倒計時結束,停止interval

????????????that.setData({?

????????????????buttonTitle: '獲取驗證碼',

????????????????buttonDisable: false

????????????})

????????}?

????}, 1000)? ? ? ? ? ? ? ? //參數一是函數? 參數二是間隔毫秒數

}

getCodeFail(){

????wx.showToast({

????????title: e.errMsg,

????????icon: 'none'

????})

????that.setData({

????????buttonTitle: '獲取驗證碼',

????????buttonDisable: false

????})

}


? ? ? ? 以上就是小程序倒計時獲取驗證碼的簡單實現,具體的代碼可以根據業務需求來修改。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。