微信小程序如何實現驗證碼倒計時效果

這篇文章主要介紹了微信小程序如何實現驗證碼倒計時效果的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇微信小程序如何實現驗證碼倒計時效果文章都會有所收獲，下面我們一起來看看吧。

如果寫過js的倒計時，那么小程序中使用也是差不多的；

代碼：

data: {
      daojishi:60,
    inter:''
    },
  daojishi: function () {
    this.data.inter = setInterval((res) => {
      this.fun();
    }, 1000);
  },
  fun: function () {
    let t = this.data.daojishi;
    t--;
    this.setData({
      daojishi: t
    })
    if (t <= 0) {
      // location.href = "https://www.baidu.com";
      clearInterval(this.data.inter);
      this.setData({
        isyanzhengma: true
      })
    }
  },

手機登錄、填手機號獲取驗證碼，倒計時后重新獲取效果

描述：

輸入正確的手機號并且輸入驗證碼后，手機登錄按鈕變為紅色可點擊狀態；自動驗證輸入的手機號是否為合法手機號；點擊獲取動態碼后開始60秒倒計時后才可以再次獲取動態碼；

效果圖：

代碼：

html:

<view class="dltel">
  <view class="teltit">手機快捷登錄</view>
  <view class="inpbox">
    <input placeholder="請輸入手機號" class="inpbtn" type='number' maxlength="11" value="{{mobile}}" bindinput='blurPhone' />
    <text class="dongtaima {{hui?'hui':'red'}}" wx:if="{{isyanzhengma}}" bindtap="dongtaima">獲取動態碼</text>
    <text class="dongtaima" wx:else>重發（{{daojishi}}）</text>
  </view>
  <view class="inpbox">
    <input placeholder="請輸入驗證碼" value="{[code]}" maxlength="6" class="inpbtn" bindinput="codetap"  />
  </view>

  <view class="teldl {{dlno ? 'tou50':''}}" bindtap="teldltap">
    <text class="icontxt">手機登錄</text>
  </view>
</view>

js:

// pages/dltel/dltel.js

import {
  sendCode,
  mobileLogin
} from "../../utils/requst/api.js";

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    navbarData: {
      isfixed: false,
      iswhite: false, //icon color
      showCapsule: 1, //是否顯示左上角圖標 1表示顯示 0表示不顯示
      title: '登錄', //導航欄 中間的標題
      backgroundcolor: '#fff',
      isintercept: false //返回攔截
    },

    mobile: '',
    code: '',
    isyanzhengma: true,
    hui: true,
    dlno: true,
    daojishi: 60,
    teltrue: false,
    inter: '',
  },
  // 手機號驗證
  blurPhone: function (e) {
    this.setData({
      mobile: e.detail.value
    })
    let phone = this.data.mobile;
    if (!(/^1[34578]\d{9}$/.test(phone))) {
      this.setData({
        teltrue: false,
        hui: true,
      })
      if (phone.length >= 11) {
        wx.showToast({
          title: '手機號有誤',
          icon: 'none',
          duration: 2000
        })
      }
    } else {
      this.setData({
        teltrue: true,
        hui: false,
      })
      console.log('驗證成功', this.data.teltrue)
    }
  },
  dongtaima: function (e) {
    if (this.data.teltrue & !this.data.hui) {
      let params = {
        mobile: this.data.mobile
      }
      sendCode(params).then((res) => {
        console.log(res);
        if (res.data.msg == '發送成功!') {
          wx.showToast({
            title: res.data.msg,
            icon: "none",
            duration: 2000
          })
          this.setData({
            isyanzhengma: false
          })
          this.daojishi();
        } else {
          wx.showToast({
            title: "發送失敗，請重發！",
            icon: "none",
            duration: 2000
          })
        }
      })
    } else if (!this.data.teltrue) {
      wx.showToast({
        title: "請填寫正確的手機號！",
        icon: "none",
        duration: 2000
      })
    }
  },
  codetap: function (e) {
    // console.log(e);
    this.setData({
      code: e.detail.value
    })
    if (this.data.teltrue & this.data.code != '') {
      this.setData({
        dlno: false
      })
    }
  },
  daojishi: function () {
    this.data.inter = setInterval((res) => {
      this.fun();
    }, 1000);
  },
  fun: function () {
    let t = this.data.daojishi;
    t--;
    this.setData({
      daojishi: t
    })
    if (t <= 0) {
      // location.href = "https://www.baidu.com";
      clearInterval(this.data.inter);
      this.setData({
        isyanzhengma: true
      })
    }
  },

  teldltap: function () {
    let params = {
      code: this.data.code,
      mobile: this.data.mobile
    }
    if (this.data.teltrue & this.data.code != '') {
      mobileLogin(params).then((res) => {
        // console.log(params);
        // console.log(res);
        if (res.data.message == "ok") { //登錄成功 修改參數
          //getApp().globalData.token = res.data.data.token;
          //getApp().globalData.type = res.data.data.type;
          //getApp().globalData.telnum = res.data.data.mobile;
          //wx.setStorageSync('token', res.data.data.token);
          //wx.setStorageSync('type', res.data.data.type);
          //wx.setStorageSync('telnum', res.data.data.mobile);

          //let pages = getCurrentPages(); // 當前頁的數據，
          //let prevPage = pages[pages.length - 3]; // 上上頁的數據
          //console.log(pages);
          //prevPage.setData({
            //token: res.data.data.token,
            //type: res.data.data.type,
            //telnum: res.data.data.mobile
          //})
          //wx.navigateBack({
            //delta: 2
          //})
        } else {
          wx.showToast({
            title: res.data.msg, // 未成功原因
            icon: "none",
            duration: 2000
          })
        }
      })
    } else if (!this.data.teltrue) {
      wx.showToast({
        title: "請填寫正確的手機號！",
        icon: "none",
        duration: 2000
      })
    } else {
      wx.showToast({
        title: "請填寫驗證碼！",
        icon: "none",
        duration: 2000
      })
    }

  },
  
})

css:(less)

@fontcolor:#353535;
@red:#ff2b0a;
.dltel{ 
  position: relative;
  width: 100%;
  height: 100vh;
  padding:0 40rpx;
  box-sizing: border-box;
  .teltit{
    font-size: 50rpx;
    color: @fontcolor;
    line-height: 90rpx;
    margin-top: 35rpx;
    margin-left: 20rpx;
  }
  .inpbox{
    position: relative;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    color: @fontcolor;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #eee;
    .dongtaima{
      
    }
    .inpbtn{
      width: 430rpx;
      height: 100%;
      margin:0 30rpx;
    }
    .hui{
      color: #888
    }
    .red{
      color: @red;
    }
  }
  .teldl{
    position: relative;
    width: 100%;
    height: 94rpx;
    border-radius: 15rpx;
    line-height: 94rpx;
    text-align: center;
    font-size: 36rpx;
    margin-top:60rpx;
    color: #fff;
    background: @red;
  }
  .tou50{
    background:#ff9584;
  }
}

關于“微信小程序如何實現驗證碼倒計時效果”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“微信小程序如何實現驗證碼倒計時效果”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。