微信小程序登錄與註冊驗證碼倒計時的效果實現

我們在做手機登錄和用戶註冊時，總會用到倒計時效果，今天就來給大家講講手機登錄時驗證碼倒計時效果的實現。

老規矩，先看效果圖

可以看到，我們在點擊獲取驗證碼以後，就開始倒計時了，正常都是從60s倒計時的，這裏爲了演示方便，我從6s開始的。可以看到倒計時結束後，按鈕又恢復了可以點擊的狀態。

一，index.wxml佈局

佈局很簡單，就是一個用戶獲取手機號輸入，一個用來獲取驗證碼輸入，一個獲取驗證碼按鈕，一個登錄按鈕。

二，index.wxss樣式

.item {
  display: flex;
  flex-direction: row;
  margin-left: 20rpx;
  margin-top: 25rpx;
  padding-bottom: 25rpx;
  border-bottom: 1px solid gainsboro;
}

.tip {
  font-size: 0.5rem;
  color: red;
}

.tip2 {
  font-size: 0.8rem;
  color: black;
}

.btn {
  color: white;
  background: #0271c1;
  font-size: 0.9rem;
  width: 90%;
  margin-top: 60rpx;
}

.input {
  margin-left: 40rpx;
}

.input2 {
  width: 50%;
}

.plac {
  color: #aab2bd;
  font-size: 0.8rem;
  /* placeholder位置  *//* text-align: right; */
}

/* 驗證嗎 */
.code {
  width: 160rpx;
  border: 1px solid #0271c1;
  font-size: 0.8rem;
  text-align: center;
  padding: 10rpx;
  position: absolute;
  right: 15rpx;
}

樣式我就不具體講解了，重要的是下面的倒計時的js事件。

三，index.js實現倒計時效果

• 1，首先看下倒計時實現的部分。
  
  上圖紅框裏是我們實現倒計時的核心代碼，可以看到我們主要是用了setInterval 這個方法來實現每個1s的計時器。
  這裏我們定義一個countDownTime，初始值爲6s，然後我們每隔1s，對countDownTime做減1操作，直到countDownTime的值小於2，也就是等於1時，我們用clearInterval方法取消計時器。
• 2，動態改變按鈕文字顏色。
  這裏之前經常有同學問過，怎麼在js裏動態改變小程序組件的樣式。其實小程序這點做的不如vue好，不能在js裏獲取到組件的實例。所以我們就要換個方式了。

<!-- 這裏我們同在在wxml裏寫style來實現樣式的動態改變 -->
<text class="code" style="color:{{codeColor}};" >獲取驗證碼</text>

這個時候我們在去看第一個，倒計時裏寫的下面這段代碼。這裏就是用來動態改變按鈕上文字顏色的方法。

     if (countDownTime < 2) {
        that.setData({
          codeColor: "#0271c1",
          codeText: "獲取驗證碼"
        })
      } else {
        that.setData({
          codeColor: "#e6252b",
          codeText: "60s"
        })
      }
      

我們這裏還有做一步處理，就是在倒計時過程中，用戶不能再次點擊獲取驗證嗎的按鈕，獲取點擊時要給用戶提示。

• 下面把index.js的完整代碼貼出來給大家

//老師微信2501902696
let timeNum = 6 //60秒倒計時
let countDownTime = timeNum
let timer; //計時器
Page({
  data: {
    codeColor: "#0271c1",
    codeText: "獲取驗證碼"
  },
  //獲取驗證碼
  getCode() {
    if (countDownTime == timeNum) {
      this.setInterval()
      this.setData({
        codeColor: "#e6252b",
        codeText: countDownTime + "s"
      })
    } else {
      wx.showToast({
        title: '請等待驗證碼',
        icon: "none"
      })
    }
  },

  // 計時器
  setInterval: function() {
    const that = this
    timer = setInterval(function() { // 設置定時器
      countDownTime--
      if (countDownTime < 2) {
        clearInterval(timer)
        that.setData({
          codeColor: "#0271c1",
          codeText: "獲取驗證碼"
        })
        countDownTime = timeNum
      } else {
        that.setData({
          codeColor: "#e6252b",
          codeText: countDownTime + "s"
        })
      }
      console.log(countDownTime + "s")
    }, 1000)
  },
})

這樣我們就能實現微信小程序在登錄或者註冊時實現驗證碼倒計時的效果了。

今天就先到這裏，下一節給大家講解手機號的校驗，和驗證碼的隨機生成。還有短信驗證碼的發送都會在後面的文章做講解。敬請關注。