微信小程式擷取驗證碼倒計時

很久沒有更新過文章了，當然也很久沒有登陸過了，接下來的日子，會不定期更新，但願能夠對大家有所幫助。

擷取驗證碼倒計時，最簡單的就是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);

  },

)}