微信小程序---实现输入手机验证码功能
*** 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)
??},
})
總結
以上是生活随笔為你收集整理的微信小程序---实现输入手机验证码功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript-操作DOM对象-创
- 下一篇： 使用html5+的plus调起相机拍照，