小程序獲取手機驗證碼倒計時的方法
更新時間:2022年08月02日 17:13:16 作者:羽筠
這篇文章主要為大家詳細(xì)介紹了小程序獲取手機驗證碼倒計時的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下<BR>
本文實例為大家分享了小程序獲取手機驗證碼倒計時的具體代碼,供大家參考,具體內(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="輸入手機號" maxlength="11" placeholder-style="color:#ccc;" /> </view> ? <view class="bind_input"> ?? ?<input type="tel" value="{[code]}" bindinput="setCode" placeholder="短信驗證碼" 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">獲取驗證碼</text> </view> ? <view bindtap="bindDo" class="bind_btn">確定</view>
.js
Page({ ? ? /** ? ?* 頁面的初始數(shù)據(jù) ? ?*/ ? data: { ?? ??? ?mobile:'', ?? ??? ?code:'', ?? ??? ? ?? ??? ?// 倒計時參數(shù) ?? ??? ?timeStart:60, //倒計時初始值 ?? ??? ?timeCur:null, //當(dāng)前倒計時顯示值 ?? ??? ?timer:null, ?? ??? ? ?? ??? ?ifTimeIn:false, //是否倒計時中 ?? ??? ? ?? ??? ?ifSendMobileVerify:false, //是否發(fā)送成功驗證碼 ? }, ?? ? ?? ?// 設(shè)置用戶輸入的手機號 ?? ?setMobile(e){ ?? ??? ?// console.log(e.detail.value); ?? ??? ?this.setData({ ?? ??? ??? ?mobile : e.detail.value.replace(/\s+/g,"") ?? ??? ?}); ?? ?}, ?? ? ?? ?// 設(shè)置用戶輸入的驗證碼 ?? ?setCode(e){ ?? ??? ?// console.log(e.detail.value); ?? ??? ?this.setData({ ?? ??? ??? ?code : e.detail.value.replace(/\s+/g,"") ?? ??? ?}); ?? ?}, ?? ? ?? ? ?? ? ?? ?// 倒計時 ?? ?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 ?? ??? ?}); ?? ?}, ?? ? ?? ?// 獲取驗證碼 ?? ?getMobileVerify(){ ?? ??? ?if(!this.data.mobile){ ?? ??? ??? ?wx.showModal({ ?? ??? ??? ??? ?title: '友情提示', ?? ??? ??? ??? ?content: '請輸入手機號', ?? ??? ??? ??? ?showCancel: false, ?? ??? ??? ?}); ?? ??? ??? ?return false ?? ??? ?} ?? ??? ? ?? ??? ?if(!/^1\d{10}$/.test(this.data.mobile)){ ?? ??? ??? ?wx.showModal({ ?? ??? ??? ??? ?title: '友情提示', ?? ??? ??? ??? ?content: '請輸入正確的手機號', ?? ??? ??? ??? ?showCancel: false, ?? ??? ??? ?}); ?? ??? ??? ?return false; ?? ??? ?} ?? ??? ? ?? ??? ?wx.showLoading({ ?? ??? ? ?title: "發(fā)送中", ?? ??? ? ?mask: true ?? ??? ?}); ?? ??? ? ?? ??? ?let dataJson = { ?? ??? ??? ?mobile : this.data.mobile, ?? ??? ?}; ?? ??? ? ?? ??? ?/* ----請求后臺發(fā)送驗證碼成功---- */ ?? ??? ?// 執(zhí)行倒計時 ?? ??? ?this.setData({ ?? ??? ??? ?timeCur : this.data.timeStart, ?? ??? ??? ?timer : setInterval(this.setTime,1000), ?? ??? ??? ?ifTimeIn : true, ?? ??? ??? ?ifSendMobileVerify : true ?? ??? ?}); ?? ??? ?/* ----請求后臺發(fā)送驗證碼成功---- */ ?? ??? ?wx.hideLoading(); ?? ?}, ?? ? ?? ?// 確定提交 ?? ?bindDo(){ ?? ??? ?if(!this.data.ifSendMobileVerify){ ?? ??? ??? ?wx.showModal({ ?? ??? ??? ??? ?title: '友情提示', ?? ??? ??? ??? ?content: '請確定您的手機收到驗證碼再操作', ?? ??? ??? ??? ?showCancel: false, ?? ??? ??? ?}); ?? ??? ??? ?return false; ?? ??? ?} ?? ??? ?if(!this.data.code){ ?? ??? ??? ?wx.showModal({ ?? ??? ??? ??? ?title: '友情提示', ?? ??? ??? ??? ?content: '請輸入驗證碼', ?? ??? ??? ??? ?showCancel: false, ?? ??? ??? ?}); ?? ??? ??? ?return false; ?? ??? ?} ?? ??? ? ?? ??? ?/* ----請求后臺提交成功---- */ ?? ??? ?wx.showToast({ ?? ??? ??? ?title: '成功', ?? ??? ??? ?icon: 'success', ?? ??? ??? ?mask: true, ?? ??? ??? ?duration: 1500 ?? ??? ?}); ?? ??? ?/* ----請求后臺提交成功---- */ ?? ?}, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示 ? ?*/ ? onShow: function () { ? ? }, })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
如何實現(xiàn)修改密碼時密碼框顯示保存到cookie的密碼
修改密碼時密碼框顯示保存到cookie的密碼,只要在input框中加入AUTOCOMPLETE="OFF" 即可,感興趣的朋友可以了解下2013-12-12使用plupload自定義參數(shù)實現(xiàn)多文件上傳
這篇文章主要介紹了使用plupload自定義參數(shù)實現(xiàn)多文件上傳的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07JS封裝cookie操作函數(shù)實例(設(shè)置、讀取、刪除)
這篇文章主要介紹了JS封裝cookie操作函數(shù),以實例形式分析了JavaScript實現(xiàn)針對cookie的設(shè)置、獲取及刪除相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11關(guān)于UTF-8的客戶端用AJAX方式獲取GB2312的服務(wù)器端亂碼問題的解決辦法
客戶端是UTF-8編碼,這也是現(xiàn)在大家公認(rèn)的標(biāo)準(zhǔn)編碼在這種情況下,實用AJAX異步獲取GB2312編碼的服務(wù)器端信息時,不可避免的要遇到漢字亂碼問題2010-11-11javascript設(shè)計模式之中介者模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計模式之中介者模式學(xué)習(xí)筆記,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02