微信小程序?qū)崿F(xiàn)驗證碼倒計時效果

第微信小程序?qū)崿F(xiàn)驗證碼倒計時效果本文實例為大家分享了微信小程序驗證碼倒計時效果的具體代碼，供大家參考，具體內(nèi)容如下

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

代碼：

data:{

daojishi:60,

inter:''

},

daojishi:function(){

er=setInterval((res)={

this.fun();

},1000);

fun:function(){

lett=this.data.daojishi;

t--;

this.setData({

daojishi:t

})

if(t=0){

//location.href="";

clearInterval(er);

this.setData({

isyanzhengma:true

})

}

},

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

描述：

輸入正確的手機號并且輸入驗證碼后，手機登錄按鈕變?yōu)榧t色可點擊狀態(tài)；自動驗證輸入的手機號是否為合法手機號；點擊獲取動態(tài)碼后開始60秒倒計時后才可以再次獲取動態(tài)碼；

效果圖：

代碼：

html:

view

view手機快捷登錄/view

view

inputplaceholder="請輸入手機號"type='number'maxlength="11"value="{{mobile}}"bindinput='blurPhone'/

textclass="dongtaima{{hui'hui':'red'}}"wx:if="{{isyanzhengma}}"bindtap="dongtaima"獲取動態(tài)碼/text

textwx:else重發(fā)（{{daojishi}}）/text

/view

view

inputplaceholder="請輸入驗證碼"value="{[code]}"maxlength="6"bindinput="codetap"

/

/view

viewclass="teldl{{dlno'tou50':''}}"bindtap="teldltap"

text手機登錄/text

/view

/view

js:

//pages/dltel/dltel.js

import{

sendCode,

mobileLogin

}from"../../utils/requst/api.js";

Page({

/**

*頁面的初始數(shù)據(jù)

*/

data:{

navbarData:{

isfixed:false,

iswhite:false,//iconcolor

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

})

letphone=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){

letparams={

mobile:this.data.mobile

}

sendCode(params).then((res)={

console.log(res);

if(res.data.msg=='發(fā)送成功!'){

wx.showToast({

title:res.data.msg,

icon:"none",

duration:2000

})

this.setData({

isyanzhengma:false

})

this.daojishi();

}else{

wx.showToast({

title:"發(fā)送失敗，請重發(fā)！",

icon:"none",

duration:2000

})

}

})

}elseif(!this.data.teltrue){

wx.showToast({

title:"請?zhí)顚懻_的手機號！",

icon:"none",

duration:2000

})

}

codetap:function(e){

//console.log(e);

this.setData({

code:e.detail.value

})

if(this.data.teltruethis.data.code!=''){

this.setData({

dlno:false

})

}

daojishi:function(){

er=setInterval((res)={

this.fun();

},1000);

fun:function(){

lett=this.data.daojishi;

t--;

this.setData({

daojishi:t

})

if(t=0){

//location.href="";

clearInterval(er);

this.setData({

isyanzhengma:true

})

}

teldltap:function(){

letparams={

code:this.data.code,

mobile:this.data.mobile

}

if(this.data.teltruethis.data.code!=''){

mobileLogin(params).then((res)={

//console.log(params);

//console.log(res);

if(res.data.message=="ok"){//登錄成功修改參數(shù)

//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);

//letpages=getCurrentPages();//當前頁的數(shù)據(jù)，

//letprevPage=pages[pages.length-3];//上上頁的數(shù)據(jù)

//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

})

}

})

}elseif(!this.data.teltrue){

wx.showToast({

title:"請?zhí)顚懻_的手機號！",

icon:"none",

duration:2000

})

}else{

wx.showToast({

title:"請?zhí)顚戲炞C碼！",

icon:"none",

duration:2000

})

}

})

css:(less)

@fontcolor:#353535;

@red:#ff2b0a;

.dltel{

position:relative;

width:100%;

height:100vh;

padding:040rpx;

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:1pxsolid#eee;

.dongtaima{

}

.inpbtn{

width:430rpx;

height:100%;

margin:030rpx;

}

.hui{

color:#888

}

.red{

color:@red;

}