小程序验证码倒计时

我们在开发的过程中，用户修改信息的时候需要修改一些敏感信息，例如更改手机号，我们需要发验证码，所以我们就用到了倒计时；

 .wxml

  <view class="settel">
    <button class="ss" hidden='{{codeIsCanClick}}'>
      {{last_time}}s
    </button>
    <button class="right" bindtap='clickCode' hidden='{{!codeIsCanClick}}' >
      获取验证码
    </button>
  </view>

　.wxss

.ss{
  padding: 0;
  margin: 0;
  width:140rpx;
height:50rpx;
line-height: 50rpx;
background-color: #121212;
border-radius:4px;
text-align: center;
position: absolute;
right: 25rpx;
 font-size:24rpx;
font-weight:400;
color:rgba(255,255,255,1);
border:1rpx solid rgba(255,255,255,1);
}

.right{
  width:140rpx;
height:50rpx;
background:#FE2B54;
border-radius:4rpx;
position: absolute;
right: 25rpx;
text-align: center;
line-height: 50rpx;
font-size:24rpx;
font-weight:400;
color:#fff;
padding: 0;
margin: 0;
}

　　.js中处理点击按钮事件

data:{
codeIsCanClick: true,
},
clickCode(){
       var that = this;
          // 倒计时事件 单位s
          var countdown = 60;
          var settime = function (that) {
            if (countdown == 0) {
              that.setData({
                codeIsCanClick: true
              })
              countdown = 60;
              return;
            } else {
              that.setData({
                codeIsCanClick: false,
                last_time: countdown
              })
              countdown--;
            }
            setTimeout(function () {
              settime(that)
            }, 1000
            )
          }
          settime(that);
}

　　简单的验证码倒计时就完成了，我们可以在请求接口后来调用它