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

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

如果寫過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秒倒計時后才可以再次獲取動態碼；

效果圖：

代碼：

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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。