微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼倒計(jì)時60s

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

功能展示：

WXML：

view

!--手機(jī)--

view

!--手機(jī)圖標(biāo)--

view

imagesrc="/icons/svg/660/660439.svg"/image

text手機(jī)/text

/view

!--內(nèi)容--

view

view

text＋86/text

/view

view

text▼/text

/view

view

inputplaceholder="請輸入手機(jī)號"focus="{{focus}}"

value="{{tel}}"bindinput="watchTel"/

/view

/view

!--下劃線--

view/view

view/view

/view

!--驗(yàn)證碼--

view

!--驗(yàn)證碼圖標(biāo)--

view

imagesrc="/icons/png/128/179/179640.png"/image

text驗(yàn)證碼/text

/view

!--內(nèi)容--

view

view

inputplaceholder="請輸入驗(yàn)證碼"focus="{{focus}}"

value="{{VerificationCode}}"bindinput="watchVerificationCode"/

/view

/view

!--點(diǎn)擊獲取驗(yàn)證碼--

view

buttonsize="mini"disabled="{{disabled}}"bindtap="bindButtonTap"

view

text{{text}}/text

/view

/button

/view

!--下劃線--

view/view

/view

!--提交按鈕--

view

buttontype="primary"size="default"bindtap="ChangeTel"

text提交/text

/button

/view

WXSS：

.all{

height:100vh;

width:100vw;

/*border:2rpxsolidblue;*/

.tel{

position:relative;

top:10vh;

left:10vw;

height:16vh;

width:80vw;

/*border:2rpxsolidred;*/

.icon_tel{

position:absolute;

top:1vh;

left:2vh;

height:6vh;

width:24vw;

/*border:2rpxsolidred;*/

.tel_image{

position:absolute;

height:6vh;

width:7vw;

/*border:2rpxsolidred;*/

.tel_words{

position:absolute;

left:9vw;

height:6vh;

width:15vw;

top:1vh;

/*border:2rpxsolidred;*/

.content_tel{

position:absolute;

top:8vh;

left:2vw;

height:6vh;

width:75vw;

/*border:2rpxsolidblue;*/

.line_adress{

position:absolute;

height:3rpx;

width:21vw;

left:2vw;

bottom:0.5vh;

background:gainsboro;

.line_input{

position:absolute;

height:3rpx;

width:47vw;

left:25vw;

bottom:0.5vh;

background:gainsboro;

.line_VerificationCode{

position:absolute;

height:3rpx;

width:47vw;

left:2vw;

bottom:0.5vh;

background:gainsboro;

.adress{

position:absolute;

top:1vh;

height:5vh;

width:20vw;

/*border:2rpxsolidgold;*/

text-align:center;

.sign{

position:absolute;

height:5vh;

width:4vw;

top:2vh;

left:20vw;

/*border:2rpxsolidgreenyellow;*/

text-align:center;

align-items:center;

font-size:22rpx;

.input_tel{

position:absolute;

height:6vh;

width:47vw;

left:28vw;

/*border:2rpxsolidred;*/

.input_VerificationCode{

position:absolute;

height:6vh;

width:47vw;

left:2vw;

.VerificationCode{

position:relative;

top:15vh;

left:10vw;

height:16vh;

width:80vw;

/*border:2rpxsolidred;*/

.icon_VerificationCode{

position:absolute;

top:1vh;

left:3vh;

height:6vh;

width:24vw;

/*border:2rpxsolidred;*/

.content_VerificationCode{

position:absolute;

top:8vh;

left:2vw;

height:6vh;

width:47vw;

/*border:2rpxsolidblue;*/

.button_VerificationCode{

/*border:2rpxsolidred;*/

position:absolute;

top:7.5vh;

left:50vw;

height:8vh;

width:32vw;

border-radius:60rpx;

background:red;

.world{

position:absolute;

height:70rpx;

width:160rpx;

top:10rpx;

left:40rpx;

.button_world{

font-size:31rpx;

text-align:center;

align-items:center;

color:white;

.button_submission{

position:absolute;

height:7vh;

width:60vw;

top:55vh;

left:20vw;

/*border:2rpxsolidred;*/

.button_submissionWorld{

position:absolute;

left:26vw;

font-size:35rpx;

/*border:2rpxsolidred;*/

top:-2rpx;

}

JS：

varqcloud=require('../../vendor/wafer2-client-sdk/index')

varconfig=require('../../config')

varutil=require('../../utils/util.js')

Page({

data:{

VerificationCode:'',

text:'獲取驗(yàn)證碼',//按鈕文字

currentTime:61,//倒計(jì)時

disabled:false,//按鈕是否禁用

tel:''//獲取到的手機(jī)欄中的值

//手機(jī)號監(jiān)聽輸入

watchTel:function(event){

console.log(event);

this.data.tel=event.detail.value

this.setData({

tel:event.detail.value

})

//驗(yàn)證碼監(jiān)聽輸入

watchVerificationCode:function(event){

console.log(event);

this.data.VerificationCode=event.detail.value

this.setData({

VerificationCode:event.detail.value

})

//提交修改密碼表單

ChangeTel:function(){

varthat=this

if(this.data.VerificationCode!=10086){

wx.showToast({

icon:'none',

title:'驗(yàn)證碼輸入錯誤！'

})

}

else{

util.showBusy('請求中...')

that.data.userpwd=that.data.renewpwd

qcloud.request({

url:`${config.service.host}/weapp/UserChangeTel`,

header:{

'content-type':'application/x-www-form-urlencoded'

},

method:"POST",

data:{

tel:that.data.tel

},

login:false,

success(result){

util.showSuccess('請求成功完成')

that.setData({

requestResult:JSON.stringify(result.data)

})

console.log(result);

},

fail(error){

util.showModel('請求失敗',error);

console.log('requestfail',error);

}

}),

that.setData({

tel:'',

VerificationCode:''

})

}

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

bindButtonTap:function(){

varthat=this;

that.setData({

disabled:true,//只要點(diǎn)擊了按鈕就讓按鈕禁用（避免正常情況下多次觸發(fā)定時器事件）

color:'grey',

})

vartel=that.data.tel;

varcurrentTime=that.data.currentTime

//把手機(jī)號跟倒計(jì)時值變例成js值

varwarn=null;

//warn為當(dāng)手機(jī)號為空或格式不正確時提示用戶的文字，默認(rèn)為空

if(tel==''){

warn="號碼不能為空";

}

elseif(tel.trim().length!=11||!/^1[3|4|5|6|7|8|9]\d{9}$/.test(tel)){

warn="手機(jī)號格式不正確";

}

else{

//當(dāng)手機(jī)號正確的時候提示用戶短信驗(yàn)證碼已經(jīng)發(fā)送

wx.showToast({

title:'短信驗(yàn)證碼已發(fā)送',

icon:'none',

duration:2000

});

//設(shè)置一分鐘的倒計(jì)時

varinterval=setInterval(function(){

currentTime--;

//每執(zhí)行一次讓倒計(jì)時秒數(shù)減一

that.setData({

text:currentTime+'s',