小程序倒計時獲取短信驗證碼

wxml

<view class='shouji_info'>

 

<view class='info_list'>

 

<input placeholder='請輸入手機號' bindinput="phoneInput"></input>

 

</view>

 

<view class='info_list'>

 

<input class='left' placeholder='驗證碼'></input>

 

<button class='right yanzheng_btn' bindtap="bindButtonTap" disabled='{{disabled}}' style="{{text}}</button>

 

</view>

 

</view>

wxss

page{

 

font-size: 30rpx;

 

}

 

 

 

.left{ float: left}

 

.right{float: right}

 

 

 

.info_list {

 

height: 103rpx;

 

line-height: 103rpx;

 

width: 100%;

 

border-bottom: 1px solid #bcbcbd;

 

padding-left: 24rpx;

 

display: inline-block;

 

font-size: 33rpx;

 

}

.shouji_info input {

 

margin-top: 25rpx;

 

/* background: rebeccapurple; */

 

}

.yanzheng_btn {

 

width: 207rpx;

 

background: #929fff;

 

margin-right: 20rpx;

 

height: 82rpx;

 

margin-top: 12rpx;

 

text-align: center;

 

line-height: 82rpx;

 

border-radius: 15rpx;

 

color: #fff;

 

font-size: 33rpx;

 

padding: 0 10rpx;

 

}

 js

// pages/biji/biji.js

Page({

data: {

text: '獲取驗證碼', //按鈕文字

currentTime: 61, //倒計時

disabled: false, //按鈕是否禁用

phone: '' //獲取到的手機欄中的值

},

//獲取手機欄input中的值

phoneInput: function(e) {

this.setData({

phone: e.detail.value

})

},

//獲取驗證碼按鈕事件

bindButtonTap: function() {

var that = this;

that.setData({

disabled: true, //只要點擊了按鈕就讓按鈕禁用 （避免正常狀況下屢次觸發定時器事件）

color: '#ccc',

})

var phone = that.data.phone;

var currentTime = that.data.currentTime //把手機號跟倒計時值變例成js值

var warn = null; //warn爲當手機號爲空或格式不正確時提示用戶的文字，默認爲空

if (phone == '') {

warn = "號碼不能爲空";

} else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {

warn = "手機號格式不正確";

} else {

//當手機號正確的時候提示用戶短信驗證碼已經發送

wx.showToast({

title: '短信驗證碼已發送',

icon: 'none',

duration: 2000

});

//設置一分鐘的倒計時

var interval = setInterval(function() {

currentTime--; //每執行一次讓倒計時秒數減一

that.setData({

text: currentTime + 's', //按鈕文字變成倒計時對應秒數

})

//若是當秒數小於等於0時 中止計時器 且按鈕文字變成從新發送 且按鈕變成可用狀態 倒計時的秒數也要恢復成默認秒數 即讓獲取驗證碼的按鈕恢復到初始化狀態只改變按鈕文字

if (currentTime <= 0) { 

clearInterval(interval)

that.setData({

text: '從新發送',

currentTime: 61,

disabled: false,

color: '#929fff'

})

}

}, 1000);

};

//判斷 當提示錯誤信息文字不爲空 即手機號輸入有問題時提示用戶錯誤信息 而且提示完以後必定要讓按鈕爲可用狀態 由於點擊按鈕時設置了只要點擊了按鈕就讓按鈕禁用的狀況

if (warn != null) {

wx.showModal({

title: '提示',

content: warn

})

that.setData({

disabled: false,

color: '#929fff'

})

return;

};

},

})