*** html部分
<viewclass='container'>
<viewclass='main-title'bindtap="test">
输入短信验证码
</view>
<viewclass="sub-title">
已向<textclass="phone">139****9999</text>发送验证码
</view>
<viewclass="code-box"bindtap="getFocus">
<viewclass="{{code.length==0?'active':'input-box'}}">{{code[0]}}</view>
<viewclass="{{code.length==1?'active':'input-box'}}">{{code[1]}}</view>
<viewclass="{{code.length==2?'active':'input-box'}}">{{code[2]}}</view>
<viewclass="{{code.length==3?'active':'input-box'}}">{{code[3]}}</view>
<viewclass="{{code.length==4?'active':'input-box'}}">{{code[4]}}</view>
<viewclass="{{code.length==5?'active':'input-box'}}">{{code[5]}}</view>
</view>
<inputbindinput="getCode"class="input-number"type="number"focus="{{isFocus}}"maxlength="6"/>
<viewclass="time-box">
<viewclass="regain"hover-class="btn-hover"wx:if="{{isRegain}}"bindtap="regain">重新获取验证码</view>
<viewclass="regain-info"wx:else>
<textclass="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:solid1rpx#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:solid1rpx#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(){
varcurrentTime=this.data.time
lettimer=setInterval(()=>{
currentTime--;
this.setData({
time:currentTime
})
if(currentTime<=0){
clearInterval(timer)
this.setData({
time:20,
isRegain:true,
})
}
},1000)
},
})
