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

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

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

代碼：

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

})

}

},

手機(jī)登錄、填手機(jī)號(hào)獲取驗(yàn)證碼，倒計(jì)時(shí)后重新獲取效果

描述：

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

效果圖：

代碼：

html:

view

view手機(jī)快捷登錄/view

view

inputplaceholder="請(qǐng)輸入手機(jī)號(hào)"type='number'maxlength="11"value="{{mobile}}"bindinput='blurPhone'/

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

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

/view

view

inputplaceholder="請(qǐng)輸入驗(yàn)證碼"value="{[code]}"maxlength="6"bindinput="codetap"

/

/view

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

text手機(jī)登錄/text

/view

/view

js:

//pages/dltel/dltel.js

import{

sendCode,

mobileLogin

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

Page({

/**

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

*/

data:{

navbarData:{

isfixed:false,

iswhite:false,//iconcolor

showCapsule:1,//是否顯示左上角圖標(biāo)1表示顯示0表示不顯示

title:'登錄',//導(dǎo)航欄中間的標(biāo)題

backgroundcolor:'#fff',

isintercept:false//返回?cái)r截

},

mobile:'',

code:'',

isyanzhengma:true,

hui:true,

dlno:true,

daojishi:60,

teltrue:false,

inter:'',

//手機(jī)號(hào)驗(yàn)證

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:'手機(jī)號(hào)有誤',

icon:'none',

duration:2000

})

}

}else{

this.setData({

teltrue:true,

hui:false,

})

console.log('驗(yàn)證成功',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ā)送失敗，請(qǐng)重發(fā)！",

icon:"none",

duration:2000

})

}

})

}elseif(!this.data.teltrue){

wx.showToast({

title:"請(qǐng)?zhí)顚懻_的手機(jī)號(hào)！",

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();//當(dāng)前頁(yè)的數(shù)據(jù)，

//letprevPage=pages[pages.length-3];//上上頁(yè)的數(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:"請(qǐng)?zhí)顚懻_的手機(jī)號(hào)！",

icon:"none",

duration:2000

})

}else{

wx.showToast({

title:"請(qǐng)?zhí)顚戲?yàn)證碼！",

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;

}