小程序短信验证码倒计时样式

连续点击不影响

wxml

<view class="lia sa">
      <view class="name">验证码</view>
      <input class="inp"></input>
      <view class="huoqu" bindtap="{{flag}}" style="background:{{bg}}">{{yzm}}</view>
</view>

wxss

.lia{
      height:82rpx;
      width:80%;
      margin-left:10%;
}
.lia .name{
      height:82rpx;
      line-height:82rpx;
      font-size:28rpx;
      color:#000000;
      width:25%;
      text-align: center;
      float: left;
}
.lia .phone{
      height:82rpx;
      width:74%;
      text-align: center;
      border:3rpx solid #CCCCCC;
      float: left;
}
.lia .inp{
      height:78rpx;
      width:45%;
      float: left;
      border:3rpx solid #CCCCCC;
      text-align: center;
}
.lia .huoqu{
      height:100%;
      width:29%;
      float: right;
      line-height:82rpx;
      text-align: center;
      color:#fff;
      font-size: 24rpx;
}

wx.js

data: {
            bg:'#E02020',
            time : 10,
            yzm:'获取验证码',
            second:'10',
            flag:'huoqu'
      },
      // 获取验证码
      huoqu:function(){
            var that = this;
            if (that.data.time == 0){
                  that.setData({
                        yzm:'重新发送',
                        flag:'huoqu',
                        bg:'#E02020',
                        time:'10',
                  })
            }else{
                  that.setData({
                        yzm: that.data.time-- + 's后重新获取',
                        flag:'',
                        bg:'#ccc',
                  })
                  setTimeout(function () {
                        that.huoqu()
                  }, 1000)
            }
      },