實現功能:
? ?????點擊發送驗證碼,發送按鈕進入倒計時狀態。
具體實現:
????????要實現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
????})
}
? ? ? ? 以上就是小程序倒計時獲取驗證碼的簡單實現,具體的代碼可以根據業務需求來修改。