小程序如何实现验证码倒计时

获取验证码界面

实现功能：

       点击发送验证码，发送按钮进入倒计时状态。

具体实现：

        要实现JS的倒计时功能，首先要了解两个JS的定时器方法。setTimeout 和 setInterval。两个方法都是延迟一段时间后执行某个操作。区别是setTimeout执行完后会停止，setInterval会一直执行。

        两个方法的使用：setTimeout(code,millisec) setInterval(code,millisec)。其中code是执行的操作，可以是function，可以是个函数名。milisec是延迟的时间，单位是毫秒。如果想让setTimeout方法一直执行，可以在setTimeout的执行函数中继续调用setTimeout。而setInterval会一直执行，直到你调用了clearInterval（）方法，setInterval的返回值定时器id，可以作为clearInterval的参数。

        然后就是倒计时小程序的实现：UI就不写了，大家根据自己的需求来做，至于布局，flex就完事了。

        然后是获取验证码的fuction：

data: {

    buttonDisable: false,                    //倒计时是否不可用

    phone: null,                                  //电话号码  

    buttonTitle: '获取验证码',             //按钮标题

    code: null                                    //验证码

  },

getVerifyCode() {

    if (this.data.buttonDisable) return false;        //倒计时状态不可点击

    var phone = this.data.phone;

    var regMobile = /^1\d{10}$/;        //电话正则

    if (!regMobile.test(phone)) {

      wx.showToast({

        title: '手机号有误',

        icon: 'none'

      })

      return false;

    }

    var that = this;

 wx.request({

    url: '获取验证码url',

    success（res）{

        this.getCodeSuccess()        //处理获取code成功

    },

    fail(error){

        this.getCodeFail()                //处理获取code失败

    }

})

getCodeSuccess(){

    var intervalId = setInterval(function () { 

        count -= 1;

        that.setData({

            buttonTitle: count + 's后重发', 

            buttonDisable: true

        }) 

        if (count == 0) {

            clearInterval(intervalId);                 //倒计时结束，停止interval

            that.setData({ 

                buttonTitle: '获取验证码',

                buttonDisable: false

            })

        } 

    }, 1000)                //参数一是函数  参数二是间隔毫秒数

}

getCodeFail(){

    wx.showToast({

        title: e.errMsg,

        icon: 'none'

    })

    that.setData({

        buttonTitle: '获取验证码',

        buttonDisable: false

    })

}

        以上就是小程序倒计时获取验证码的简单实现，具体的代码可以根据业务需求来修改。