小程序獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)的方法
本文實(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({ ? ? /** ? ?* 頁面的初始數(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)聽頁面顯示 ? ?*/ ? onShow: function () { ? ? }, })
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 小程序?qū)崿F(xiàn)簡單驗(yàn)證碼倒計(jì)時(shí)
- 微信小程序?qū)崿F(xiàn)短信驗(yàn)證碼倒計(jì)時(shí)
- 微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果
- 微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)
- 微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼倒計(jì)時(shí)60s
- 微信小程序?qū)崿F(xiàn)發(fā)送短信驗(yàn)證碼倒計(jì)時(shí)
- 微信小程序的注冊(cè)頁面包含倒計(jì)時(shí)驗(yàn)證碼、獲取用戶信息
- 微信小程序項(xiàng)目實(shí)踐之驗(yàn)證碼倒計(jì)時(shí)功能
- 微信小程序?qū)崿F(xiàn)驗(yàn)證碼獲取倒計(jì)時(shí)效果
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
相關(guān)文章
如何實(shí)現(xiàn)修改密碼時(shí)密碼框顯示保存到cookie的密碼
修改密碼時(shí)密碼框顯示保存到cookie的密碼,只要在input框中加入AUTOCOMPLETE="OFF" 即可,感興趣的朋友可以了解下2013-12-12使用plupload自定義參數(shù)實(shí)現(xiàn)多文件上傳
這篇文章主要介紹了使用plupload自定義參數(shù)實(shí)現(xiàn)多文件上傳的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07JS封裝cookie操作函數(shù)實(shí)例(設(shè)置、讀取、刪除)
這篇文章主要介紹了JS封裝cookie操作函數(shù),以實(shí)例形式分析了JavaScript實(shí)現(xiàn)針對(duì)cookie的設(shè)置、獲取及刪除相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11關(guān)于UTF-8的客戶端用AJAX方式獲取GB2312的服務(wù)器端亂碼問題的解決辦法
客戶端是UTF-8編碼,這也是現(xiàn)在大家公認(rèn)的標(biāo)準(zhǔn)編碼在這種情況下,實(shí)用AJAX異步獲取GB2312編碼的服務(wù)器端信息時(shí),不可避免的要遇到漢字亂碼問題2010-11-11javascript設(shè)計(jì)模式之中介者模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之中介者模式學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02Next.js解決axios獲取真實(shí)ip問題方法分析
這篇文章主要介紹了Next.js解決axios獲取真實(shí)ip問題方法分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09