小程序獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)的方法

更新時(shí)間：2022年08月02日 17:13:16 作者：羽筠

這篇文章主要為大家詳細(xì)介紹了小程序獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下<BR>

本文實(shí)例為大家分享了小程序獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下

test：

.wxss

.bind_input{ width: 450rpx; height: 80rpx; padding: 0 20rpx; margin: 0 auto 20rpx auto; border-radius: 40rpx; border: #ddd solid 1px;
?? ?display: flex; justify-content: space-between; align-items: center;
}
.bind_input input{ width: 230rpx; height: 50rpx; padding-left: 30rpx;}
.bind_yzm_btn{ width: 160rpx; height: 50rpx; line-height: 50rpx; text-align: center; color: #fff; font-size: 24rpx; border-radius: 25rpx; background-color: #0FC393;}
.bind_yzm_btn.grey{ font-size: 28rpx; background-color: #ccc;}
?
.bind_btn{ width: 450rpx; height: 80rpx; line-height: 80rpx; margin: 40rpx auto 0 auto; text-align: center; color: #fff; font-size: 36rpx; font-weight: 300; border-radius: 40rpx; background-color: #0FC393;
?? ?box-shadow:0px 10px 20px rgba(0,182,142,0.4);
}

.wxml

<view class="bind_input">
?? ?<input type="tel" value="{{mobile}}" bindinput="setMobile" placeholder="輸入手機(jī)號(hào)" maxlength="11" placeholder-style="color:#ccc;" />
</view>
?
<view class="bind_input">
?? ?<input type="tel" value="{[code]}" bindinput="setCode" placeholder="短信驗(yàn)證碼" maxlength="4" placeholder-style="color:#ccc;" />
?? ?<text wx:if="{{ifTimeIn}}" class="bind_yzm_btn grey">{{timeCur}}</text>
?? ?<text wx:else bindtap="getMobileVerify" class="bind_yzm_btn">獲取驗(yàn)證碼</text>
</view>
?
<view bindtap="bindDo" class="bind_btn">確定</view>

.js

Page({
?
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
?? ??? ?mobile:'',
?? ??? ?code:'',
?? ??? ?
?? ??? ?// 倒計(jì)時(shí)參數(shù)
?? ??? ?timeStart:60, //倒計(jì)時(shí)初始值
?? ??? ?timeCur:null, //當(dāng)前倒計(jì)時(shí)顯示值
?? ??? ?timer:null,
?? ??? ?
?? ??? ?ifTimeIn:false, //是否倒計(jì)時(shí)中
?? ??? ?
?? ??? ?ifSendMobileVerify:false, //是否發(fā)送成功驗(yàn)證碼
? },
?? ?
?? ?// 設(shè)置用戶輸入的手機(jī)號(hào)
?? ?setMobile(e){
?? ??? ?// console.log(e.detail.value);
?? ??? ?this.setData({
?? ??? ??? ?mobile : e.detail.value.replace(/\s+/g,"")
?? ??? ?});
?? ?},
?? ?
?? ?// 設(shè)置用戶輸入的驗(yàn)證碼
?? ?setCode(e){
?? ??? ?// console.log(e.detail.value);
?? ??? ?this.setData({
?? ??? ??? ?code : e.detail.value.replace(/\s+/g,"")
?? ??? ?});
?? ?},
?? ?
?? ?
?? ?
?? ?// 倒計(jì)時(shí)
?? ?setTime(){
?? ??? ?let timeCur = this.data.timeCur - 1;
?? ??? ?// console.log(timeCur);
?? ??? ?if(timeCur < 0){
?? ??? ??? ?clearInterval(this.data.timer);
?? ??? ??? ?this.setData({
?? ??? ??? ??? ?ifTimeIn:false
?? ??? ??? ?});
?? ??? ??? ?return false;
?? ??? ?}
?? ??? ?this.setData({
?? ??? ??? ?timeCur : timeCur
?? ??? ?});
?? ?},
?? ?
?? ?// 獲取驗(yàn)證碼
?? ?getMobileVerify(){
?? ??? ?if(!this.data.mobile){
?? ??? ??? ?wx.showModal({
?? ??? ??? ??? ?title: '友情提示',
?? ??? ??? ??? ?content: '請(qǐng)輸入手機(jī)號(hào)',
?? ??? ??? ??? ?showCancel: false,
?? ??? ??? ?});
?? ??? ??? ?return false
?? ??? ?}
?? ??? ?
?? ??? ?if(!/^1\d{10}$/.test(this.data.mobile)){
?? ??? ??? ?wx.showModal({
?? ??? ??? ??? ?title: '友情提示',
?? ??? ??? ??? ?content: '請(qǐng)輸入正確的手機(jī)號(hào)',
?? ??? ??? ??? ?showCancel: false,
?? ??? ??? ?});
?? ??? ??? ?return false;
?? ??? ?}
?? ??? ?
?? ??? ?wx.showLoading({
?? ??? ? ?title: "發(fā)送中",
?? ??? ? ?mask: true
?? ??? ?});
?? ??? ?
?? ??? ?let dataJson = {
?? ??? ??? ?mobile : this.data.mobile,
?? ??? ?};
?? ??? ?
?? ??? ?/* ----請(qǐng)求后臺(tái)發(fā)送驗(yàn)證碼成功---- */
?? ??? ?// 執(zhí)行倒計(jì)時(shí)
?? ??? ?this.setData({
?? ??? ??? ?timeCur : this.data.timeStart,
?? ??? ??? ?timer : setInterval(this.setTime,1000),
?? ??? ??? ?ifTimeIn : true,
?? ??? ??? ?ifSendMobileVerify : true
?? ??? ?});
?? ??? ?/* ----請(qǐng)求后臺(tái)發(fā)送驗(yàn)證碼成功---- */
?? ??? ?wx.hideLoading();
?? ?},
?? ?
?? ?// 確定提交
?? ?bindDo(){
?? ??? ?if(!this.data.ifSendMobileVerify){
?? ??? ??? ?wx.showModal({
?? ??? ??? ??? ?title: '友情提示',
?? ??? ??? ??? ?content: '請(qǐng)確定您的手機(jī)收到驗(yàn)證碼再操作',
?? ??? ??? ??? ?showCancel: false,
?? ??? ??? ?});
?? ??? ??? ?return false;
?? ??? ?}
?? ??? ?if(!this.data.code){
?? ??? ??? ?wx.showModal({
?? ??? ??? ??? ?title: '友情提示',
?? ??? ??? ??? ?content: '請(qǐng)輸入驗(yàn)證碼',
?? ??? ??? ??? ?showCancel: false,
?? ??? ??? ?});
?? ??? ??? ?return false;
?? ??? ?}
?? ??? ?
?? ??? ?/* ----請(qǐng)求后臺(tái)提交成功---- */
?? ??? ?wx.showToast({
?? ??? ??? ?title: '成功',
?? ??? ??? ?icon: 'success',
?? ??? ??? ?mask: true,
?? ??? ??? ?duration: 1500
?? ??? ?});
?? ??? ?/* ----請(qǐng)求后臺(tái)提交成功---- */
?? ?},
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
? ?*/
? onShow: function () {
?
? },
})

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

您可能感興趣的文章: