微信小程序如何實現驗證碼倒計時效果

蝸牛 互聯網技術資訊 2022-05-24 11 0

這篇文章主要介紹了微信小程序如何實現驗證碼倒計時效果的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇微信小程序如何實現驗證碼倒計時效果文章都會有所收獲,下面我們一起來看看吧。

如果寫過js的倒計時,那么小程序中使用也是差不多的;

代碼:

data:?{
??????daojishi:60,
????inter:''
????},
??daojishi:?function?()?{
????this.data.inter?=?setInterval((res)?=>?{
??????this.fun();
????},?1000);
??},
??fun:?function?()?{
????let?t?=?this.data.daojishi;
????t--;
????this.setData({
??????daojishi:?t
????})
????if?(t?<=?0)?{
??????//?location.href?=?"https://www.baidu.com";
??????clearInterval(this.data.inter);
??????this.setData({
????????isyanzhengma:?true
??????})
????}
??},

手機登錄、填手機號獲取驗證碼,倒計時后重新獲取效果

描述:

輸入正確的手機號并且輸入驗證碼后,手機登錄按鈕變為紅色可點擊狀態;自動驗證輸入的手機號是否為合法手機號;點擊獲取動態碼后開始60秒倒計時后才可以再次獲取動態碼;

效果圖:

微信小程序如何實現驗證碼倒計時效果  微信小程序 第1張

代碼:

html:

<view?class="dltel">
??<view?class="teltit">手機快捷登錄</view>
??<view?class="inpbox">
????<input?placeholder="請輸入手機號"?class="inpbtn"?type='number'?maxlength="11"?value="{{mobile}}"?bindinput='blurPhone'?/>
????<text?class="dongtaima?{{hui?'hui':'red'}}"?wx:if="{{isyanzhengma}}"?bindtap="dongtaima">獲取動態碼</text>
????<text?class="dongtaima"?wx:else>重發({{daojishi}})</text>
??</view>
??<view?class="inpbox">
????<input?placeholder="請輸入驗證碼"?value="{[code]}"?maxlength="6"?class="inpbtn"?bindinput="codetap"??/>
??</view>

??<view?class="teldl?{{dlno???'tou50':''}}"?bindtap="teldltap">
????<text?class="icontxt">手機登錄</text>
??</view>
</view>

js:

//?pages/dltel/dltel.js

import?{
??sendCode,
??mobileLogin
}?from?"../../utils/requst/api.js";

Page({

??/**
???*?頁面的初始數據
???*/
??data:?{
????navbarData:?{
??????isfixed:?false,
??????iswhite:?false,?//icon?color
??????showCapsule:?1,?//是否顯示左上角圖標?1表示顯示?0表示不顯示
??????title:?'登錄',?//導航欄?中間的標題
??????backgroundcolor:?'#fff',
??????isintercept:?false?//返回攔截
????},

????mobile:?'',
????code:?'',
????isyanzhengma:?true,
????hui:?true,
????dlno:?true,
????daojishi:?60,
????teltrue:?false,
????inter:?'',
??},
??//?手機號驗證
??blurPhone:?function?(e)?{
????this.setData({
??????mobile:?e.detail.value
????})
????let?phone?=?this.data.mobile;
????if?(!(/^1[34578]\d{9}$/.test(phone)))?{
??????this.setData({
????????teltrue:?false,
????????hui:?true,
??????})
??????if?(phone.length?>=?11)?{
????????wx.showToast({
??????????title:?'手機號有誤',
??????????icon:?'none',
??????????duration:?2000
????????})
??????}
????}?else?{
??????this.setData({
????????teltrue:?true,
????????hui:?false,
??????})
??????console.log('驗證成功',?this.data.teltrue)
????}
??},
??dongtaima:?function?(e)?{
????if?(this.data.teltrue?&?!this.data.hui)?{
??????let?params?=?{
????????mobile:?this.data.mobile
??????}
??????sendCode(params).then((res)?=>?{
????????console.log(res);
????????if?(res.data.msg?==?'發送成功!')?{
??????????wx.showToast({
????????????title:?res.data.msg,
????????????icon:?"none",
????????????duration:?2000
??????????})
??????????this.setData({
????????????isyanzhengma:?false
??????????})
??????????this.daojishi();
????????}?else?{
??????????wx.showToast({
????????????title:?"發送失敗,請重發!",
????????????icon:?"none",
????????????duration:?2000
??????????})
????????}
??????})
????}?else?if?(!this.data.teltrue)?{
??????wx.showToast({
????????title:?"請填寫正確的手機號!",
????????icon:?"none",
????????duration:?2000
??????})
????}
??},
??codetap:?function?(e)?{
????//?console.log(e);
????this.setData({
??????code:?e.detail.value
????})
????if?(this.data.teltrue?&?this.data.code?!=?'')?{
??????this.setData({
????????dlno:?false
??????})
????}
??},
??daojishi:?function?()?{
????this.data.inter?=?setInterval((res)?=>?{
??????this.fun();
????},?1000);
??},
??fun:?function?()?{
????let?t?=?this.data.daojishi;
????t--;
????this.setData({
??????daojishi:?t
????})
????if?(t?<=?0)?{
??????//?location.href?=?"https://www.baidu.com";
??????clearInterval(this.data.inter);
??????this.setData({
????????isyanzhengma:?true
??????})
????}
??},

??teldltap:?function?()?{
????let?params?=?{
??????code:?this.data.code,
??????mobile:?this.data.mobile
????}
????if?(this.data.teltrue?&?this.data.code?!=?'')?{
??????mobileLogin(params).then((res)?=>?{
????????//?console.log(params);
????????//?console.log(res);
????????if?(res.data.message?==?"ok")?{?//登錄成功?修改參數
??????????//getApp().globalData.token?=?res.data.data.token;
??????????//getApp().globalData.type?=?res.data.data.type;
??????????//getApp().globalData.telnum?=?res.data.data.mobile;
??????????//wx.setStorageSync('token',?res.data.data.token);
??????????//wx.setStorageSync('type',?res.data.data.type);
??????????//wx.setStorageSync('telnum',?res.data.data.mobile);

??????????//let?pages?=?getCurrentPages();?//?當前頁的數據,
??????????//let?prevPage?=?pages[pages.length?-?3];?//?上上頁的數據
??????????//console.log(pages);
??????????//prevPage.setData({
????????????//token:?res.data.data.token,
????????????//type:?res.data.data.type,
????????????//telnum:?res.data.data.mobile
??????????//})
??????????//wx.navigateBack({
????????????//delta:?2
??????????//})
????????}?else?{
??????????wx.showToast({
????????????title:?res.data.msg,?//?未成功原因
????????????icon:?"none",
????????????duration:?2000
??????????})
????????}
??????})
????}?else?if?(!this.data.teltrue)?{
??????wx.showToast({
????????title:?"請填寫正確的手機號!",
????????icon:?"none",
????????duration:?2000
??????})
????}?else?{
??????wx.showToast({
????????title:?"請填寫驗證碼!",
????????icon:?"none",
????????duration:?2000
??????})
????}

??},
??
})

css:(less)

@fontcolor:#353535;
@red:#ff2b0a;
.dltel{?
??position:?relative;
??width:?100%;
??height:?100vh;
??padding:0?40rpx;
??box-sizing:?border-box;
??.teltit{
????font-size:?50rpx;
????color:?@fontcolor;
????line-height:?90rpx;
????margin-top:?35rpx;
????margin-left:?20rpx;
??}
??.inpbox{
????position:?relative;
????width:?100%;
????height:?100rpx;
????line-height:?100rpx;
????font-size:?28rpx;
????color:?@fontcolor;
????display:?flex;
????flex-direction:?row;
????border-bottom:?1px?solid?#eee;
????.dongtaima{
??????
????}
????.inpbtn{
??????width:?430rpx;
??????height:?100%;
??????margin:0?30rpx;
????}
????.hui{
??????color:?#888
????}
????.red{
??????color:?@red;
????}
??}
??.teldl{
????position:?relative;
????width:?100%;
????height:?94rpx;
????border-radius:?15rpx;
????line-height:?94rpx;
????text-align:?center;
????font-size:?36rpx;
????margin-top:60rpx;
????color:?#fff;
????background:?@red;
??}
??.tou50{
????background:#ff9584;
??}
}

關于“微信小程序如何實現驗證碼倒計時效果”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“微信小程序如何實現驗證碼倒計時效果”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注蝸牛博客行業資訊頻道。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看