小程序收取短信的倒计时方法

最新推荐文章于 2021-09-13 13:59:17 发布

转载最新推荐文章于 2021-09-13 13:59:17 发布 · 363 阅读

文章标签：

#小程序 #60秒倒计时 #发送短信倒计时

本文介绍了一种在微信小程序中实现短信验证码倒计时功能的方法。通过设置定时器每秒更新显示的剩余时间，并禁用按钮防止重复点击，直至倒计时结束恢复按钮状态并清除定时器。

  小程序的收取短信的倒计时方法？
//page中添加属性（事件）
  mobileInputEvent: function (e) {
    this.setData({
      mobile: e.detail.value
    })
  },
  verifyCodeEvent: function (e) {
    if (this.data.buttonDisable) return false;
    var that = this;
    var c = 60;
    var intervalId = setInterval(function () {
      c = c - 1;
      that.setData({
        verifyCodeTime: c + 's后重发',
        buttonDisable: true
      })
      if (c == 0) {
        clearInterval(intervalId);
        that.setData({
          verifyCodeTime: '获取验证码',
          buttonDisable: false
        })
      }
    }, 1000)
    var mobile = this.data.mobile;
    var regMobile = /^1\d{10}$/;
    if (!regMobile.test(mobile)) {
      wx.showToast({
        title: '手机号有误！'
      })
      return false;
    }
    app.sendVerifyCode(function () { }, mobile);//获取短信验证码接口
  }