微信小程序获取验证码倒计时

很久没有更新过文章了，当然也很久没有登陆过了，接下来的日子，会不定期更新，但愿能够对大家有所帮助。

获取验证码倒计时，最简单的就是setInterval的应用

index.wxml 定义一个按钮设置初始化

<button class='model-sendMsg' disabled="{{isClick}}" bindtap="sendMsg">{{btnText}}</button>
           

重点来了

index.js

var timeInterval = null //倒计时函数

Page({

  /**

   * 页面的初始数据

   */

  data: {

    modelPhone: "",//手机号

    verificationCode:"",//验证码

    btnText: '获取验证码', //倒计时 

    currentTime: 60,//限制60s

    isClick: false,//获取验证码按钮，默认允许点击

  },

 // 获取验证码

  sendMsg() {

  //第一步当然是验证手机号的合法性了，这里就不在累赘

 //第二步获取验证码

    let that = this;

//设置button是否可点击，倒计时期间不可点击

    that.setData({

      isClick: true,

    })

    var currentTime = that.data.currentTime;

//开始倒计时

    timeInterval = setInterval(function () {

      currentTime--;//倒计时

      that.setData({

        btnText: currentTime + '秒后获取'

      })

      if (currentTime <= 0) {

        clearInterval(timeInterval )//重置倒计时

        that.setData({

          btnText: '获取验证码',

          currentTime: 60,

          isClick: false

        })

      }

    }, 1000);

  },

)}