小程序,验证码倒计时效果

html

<view class="person_info">
    <text class="person_info_text">验证码</text>
    <input name="code" type="number" class="person_info_input" placeholder-class="person_info_input" placeholder="请输入验证码" />
    <view class="person_info_down" bind:tap="getCode">{{code}}</view>
</view>

js

data: {
  disabled: false,
  code: '获取验证码',
},
getCode() {
  var that = this;
  if (that.data.disabled == true) {
    return;
  }

  var time = 60;
  that.setData({
    code: '60秒后重发',
    disabled: true
  })
  var Interval = setInterval(function () {
    time--;
    if (time > 0) {
      that.setData({
        code: time + '秒后重发'
      })
    } else {
      clearInterval(Interval);
      that.setData({
        code: '获取验证码',
        disabled: false
      })
    }
  }, 1000)
}
posted @ 2020-05-19 16:38  TBHacker  阅读(199)  评论(0编辑  收藏  举报