91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序如何實現發送短信驗證碼倒計時

發布時間:2021-08-17 09:07:17 來源:億速云 閱讀:138 作者:小新 欄目:開發技術

這篇文章主要介紹微信小程序如何實現發送短信驗證碼倒計時,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

效果圖

微信小程序如何實現發送短信驗證碼倒計時

WXML文件

<view class="container">
  <view class="userinfo">
    <image class="userinfo-avatar" src="../../images/timg.jpg" mode="cover"></image>
    <text class="userinfo-nickname">什么</text>
  </view>
  <view class="wrap">
    <view class="tel">
      <input type="number" bindinput="bindTelInput" maxlength="11" 
         placeholder="請輸入手機號"
         placeholder-/>
    </view>
    <view class="ver-code">
      <view class="code">
        <input type="number" bindinput="bindCodeInput" maxlength="6"
               placeholder="請輸入驗證碼"
               placeholder-/>
      </view>
      <view class="getCode" bindtap="getCode" wx:if="{{countDownNum == 60 || countDownNum == -1}}">
        <button type="primary" plain="true">獲取驗證碼</button>
      </view>
      <view class="getCode" wx:else>
        <button type="primary" plain="true">{{countDownNum}}s后重新獲取</button>
      </view>
    </view>
  </view>
  <view class="btn-login" bindtap="login">登錄</view>
</view>

JS文件

//獲取應用實例
const app = getApp()

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    phone: null, // 手機號
    code: null, // 手機驗證碼
    countDownNum: 60, // 倒計時初始值
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
    
  },
  
  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },
  
  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  },
  // 輸入手機號
  bindTelInput: function (e) {
    this.setData({
      phone: e.detail.value
    })
  },
  // 輸入驗證碼
  bindCodeInput: function (e) {
    this.setData({
      code: e.detail.value
    })
  },
  // 發送手機驗證碼
  getCode: function () {
    if (!!this.data.phone) {
      if (!!(/^1[34578]\d{9}$/.test(this.data.phone))) {
        wx.showToast({
          title: "發送成功",
          icon: "none",
          duration: 1500
        })
        this.countDown()
      } else {
        wx.showToast({
          title: "請輸入正確的手機號",
          icon: "none",
          duration: 1500
        })
      }
    } else {
      wx.showToast({
        title: "請輸入手機號",
        icon: "none",
        duration: 1500
      })
    }
  },
  /**
   * 驗證碼倒計時
   */
  countDown: function () {
    var _this = this
    var countDownNum = _this.data.countDownNum // 獲取倒計時初始值
    var timer = setInterval(function () {
      countDownNum -= 1
      _this.setData({
        countDownNum: countDownNum
      })
      if (countDownNum <= -1) {
        clearInterval(timer)
        // 取消置頂的setInterval函數將要執行的代碼
        _this.setData({
          countDownNum: 60
        })
      }
    }, 1000)
  },
  // 手機驗證碼登錄
  login: function () {
    if (this.data.phone) {
      if (!!(/^1[34578]\d{9}$/.test(this.data.phone))) {
        if (this.data.code) {
          wx.showToast({
            title: "登錄成功",
            icon: "none",
            duration: 1500
          })
        } else {
          wx.showToast({
            title: "請輸入驗證碼",
            icon: "none",
            duration: 1500
          })
        }
      } else {
        wx.showToast({
          title: "請輸入正確的手機號",
          icon: "none",
          duration: 1500
        })
      }
    } else {
      wx.showToast({
        title: "請輸入手機號",
        icon: "none",
        duration: 1500
      })
    }
  }
})

WXSS文件

.userinfo {
  height: 240rpx;
  margin: 40rpx auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo .userinfo-avatar {
  width: 140rpx;
  height: 140rpx;
  margin: 20rpx;
  border-radius: 50%;
  border: 1rpx solid #dad5d5;
}

.userinfo .userinfo-nickname {
  color: #aaa;
}

.wrap {
  width: 630rpx;
  font-size: 32rpx;
  margin: 80rpx auto 120rpx;
}

.wrap .tel {
  width: 100%;
  height: 68rpx;
  border-bottom: 1rpx solid #DDE3EC;
  margin-bottom: 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.wrap .ver-code {
  width: 100%;
  height: 68rpx;
  border-bottom: 1rpx solid #DDE3EC;
  display: flex;
  justify-content: space-between;
}

.wrap .ver-code .code {

}

.wrap .ver-code .getCode {
  min-width: 190rpx;
  height: 40rpx;
}

.wrap .ver-code .getCode button {
  width: 100%;
  height: 100%;
  font-size: 28rpx;
  font-weight: normal;
  line-height: 40rpx;
  background: #fff;
  color: #ffaa7f;
  border: none;
  padding: 0;
  margin: 0;
}

.btn-login {
  width: 588rpx;
  height: 88rpx;
  background: #ffaa7f;
  border-radius: 10rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #fff;
  margin: 0 auto;
}

.clickClass {
  background: #ea986c;
}

以上是“微信小程序如何實現發送短信驗證碼倒計時”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

达孜县| 离岛区| 恩施市| 辛集市| 淮北市| 龙泉市| 新平| 清新县| 湖北省| 南靖县| 奎屯市| 兴安县| 关岭| 隆林| 闵行区| 尼玛县| 华坪县| 保亭| 镶黄旗| 天长市| 上思县| 鹿邑县| 甘肃省| 太原市| 介休市| 凯里市| 鄂州市| 巴彦县| 和林格尔县| 贵南县| 黄陵县| 会昌县| 张北县| 江孜县| 临沭县| 运城市| 白朗县| 左权县| 临猗县| 贵港市| 大足县|