微信小程序---实现输入手机验证码功能

*** 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)

  },

})