*** html部分

<view?class='container'>

??<view?class='main-title'?bindtap="test">

????輸入短信驗證碼

??</view>

??<view?class="sub-title">

????已向<text?class="phone">139****9999</text>發送驗證碼

??</view>

??<view?class="code-box"?bindtap="getFocus">

????<view?class="{{code.length==0?'active':'input-box'}}">{{code[0]}}</view>

????<view?class="{{code.length==1?'active':'input-box'}}">{{code[1]}}</view>

????<view?class="{{code.length==2?'active':'input-box'}}">{{code[2]}}</view>

????<view?class="{{code.length==3?'active':'input-box'}}">{{code[3]}}</view>

????<view?class="{{code.length==4?'active':'input-box'}}">{{code[4]}}</view>

????<view?class="{{code.length==5?'active':'input-box'}}">{{code[5]}}</view>

??</view>

??<input?bindinput="getCode"??class="input-number"?type="number"?focus="{{isFocus}}"?maxlength="6"?/>

??<view?class="time-box">

????<view?class="regain"?hover-class="btn-hover"?wx:if="{{isRegain}}"?bindtap="regain">重新獲取驗證碼</view>

????<view?class="regain-info"?wx:else>

??????<text?class="time">{{time}}</text>后可重新獲取短信

????</view>

??</view>

?*** css部分

page{

??width:?100%;

??height:?100%;

??overflow:?hidden;

}

.container{

??padding-top:?260rpx;

??width:?100%;

??height:?100%;

??background-color:?#fafafa;

}

.container?.main-title{

??font-size:?40rpx;

??color:?#333;

??text-align:?center;

??font-weight:?bold;

??margin-bottom:?20rpx;

}

.container?.sub-title{

??font-size:?30rpx;

??color:?#666;

??text-align:?center;??

}

.container?.sub-title?.phone{

??font-size:?30rpx;

??color:?#333;

??font-weight:?bold;

}

.container?.code-box{

??width:?510rpx;

??height:?80rpx;

??margin-left:?auto;

??margin-right:?auto;

??display:?flex;

??justify-content:?space-between;

??margin-top:?80rpx;

}

.container?.code-box?.input-box{

??height:?80rpx;

??width:?72rpx;

??box-sizing:?border-box;

??border:?solid?1rpx?#d7d7d7;

??text-align:?center;

??line-height:?80rpx;

??color:?#333;

??font-size:?34rpx;

}

.container?.code-box?.active{

??height:?80rpx;

??width:?72rpx;

??box-sizing:?border-box;

??border:?solid?1rpx?#d7d7d7;

??text-align:?center;

??line-height:?80rpx;

??color:?#333;

??font-size:?34rpx;

??border-color:?#3399cc;

}?

.container?.input-number{

??opacity:?0;

??position:?absolute;

??z-index:?-1;

??height:?0rpx;

??width:?0rpx;

}

.container?.time-box{

??margin-top:?150rpx;

??text-align:?center;

??font-size:?30rpx;

}

.container?.time-box?.regain{

??color:?#3399cc;??

}

.container?.time-box?.regain-info{

??color:?#b5b5b5;

}

*** js部分

data:?{

????isFocus:true,

????code:?"",

????isRegain:false,

????timer:null,

????time:20,

??},

? ?/*?生命周期函數--監聽頁面加載?*/

??onLoad:?function?(options)?{

????this.countdown();

??},

??regain(){

????this.setData({

??????isRegain:?false,

????});??

????this.countdown();??

??},

??getFocus(){

????this.setData({

??????isFocus:?true,

????});

??},

??getCode(e){

????console.log(e)

????this.setData({

??????code:?e.detail.value

????});

??},

??countdown(){

????var?currentTime?=?this.data.time

????let?timer=setInterval(()=>{

??????currentTime--;

??????this.setData({

????????time:?currentTime

??????})

??????if?(currentTime?<=?0)?{

????????clearInterval(timer)

????????this.setData({

??????????time:?20,

??????????isRegain:true,

????????})

??????}??????

????},1000)

??},

})

總結

以上是生活随笔為你收集整理的微信小程序---实现输入手机验证码功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。