javascript實現手機登陸驗證碼倒計時效果（小程序登陸倒計時）

時間 2019-11-08

標籤 javascript 實現手機登陸驗證碼倒計時效果程序欄目 JavaScript 简体版

原文原文鏈接

咱們在作手機登陸和用戶註冊時，總會用到倒計時效果，今天就來給你們講講手機登陸時驗證碼倒計時效果的實現。vue

老規矩，先看效果圖

能夠看到，咱們在點擊獲取驗證碼之後，就開始倒計時了，正常都是從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>
複製代碼

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

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)
  },
})

複製代碼