首页 > 微信 > 详细

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

时间:2020-05-19 17:07:47      阅读:56      评论:0      收藏:0      [点我收藏+]

技术分享图片

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

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

原文:https://www.cnblogs.com/jiqing9006/p/12917858.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!