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

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

wxml代碼：

view

formbindsubmit='denglu'

view

view

label手機(jī)號(hào):/label

inputtype='number'name="tel"bindinput='shj'maxlength='11'placeholder='請(qǐng)輸入手機(jī)號(hào)'/input

/view

view/view

/view

view

view

label驗(yàn)證碼:/label

inputtype='number'name="code"placeholder='請(qǐng)輸入驗(yàn)證碼'/input

/view

view

buttonwx:if="{{isShow}}"catchtap='send'發(fā)送驗(yàn)證碼/button

buttondisabled='{{true}}'wx:else{{countdown}}秒后重新發(fā)送/button

/view

/view

buttonform-type='submit'登錄/button

/form

/view

js代碼：

constapp=getApp()

Page({

/**

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

*/

data:{

countdown:60,

isShow:true

//倒計(jì)時(shí)

count:function(that){

varinterval=setInterval(function(){

varcountdown=that.data.countdown;

if(countdown==0){

that.setData({

isShow:true,

countdown:60

})

clearInterval(interval)

}else{

countdown--;

that.setData({

isShow:false,

countdown:countdown

})

}

},1000)

//設(shè)置手機(jī)號(hào)

shj:function(e){

this.setData({

tel:e.detail.value

})

//獲取驗(yàn)證碼

send:function(){

varthat=this;

wx.showToast({

title:'驗(yàn)證碼發(fā)送成功',

icon:'none',

duration:1000,

success:function(){

that.count(that)

}

})

},

//登錄

denglu:function(e){

console.log(e.detail.value)

/**

*生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載

*/

onLoad:function(options){

})

wxss代碼：

.list{

background-color:white;

font-size:32rpx;

padding:20rpx30rpx;

display:flex;

justify-content:space-between;

align-content:center;

align-items:center

.border{

border-top:1rpxsolid#f4f4f4

.left{

display:flex;

align-content:center;

align-items:center

.leftlabel{

width:140rpx

.leftinput{

font-size:30rpx

.right{

width:240rpx;

text-align:right;

color:#ff9900;

font-size:30rpx

.send{

background-color:#3296fa;

color:white;

line-height:60rpx;

font-size:30rpx;

border-radius:0;

padding-left:0;

padding-right:0

.btn{

background-color:#3296fa;

color:white;

line