溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

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

微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼功能

發(fā)布時(shí)間：2020-08-19 14:38:50 來源：腳本之家 閱讀：143 作者：子謙呀 欄目：web開發(fā)

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼功能

小程序上經(jīng)常會(huì)有一些注冊 申請頁面需要用到隨機(jī)驗(yàn)證碼。具體實(shí)現(xiàn)方法不多說 直接上代碼

<view class='yanzhengma'>
  <text class='left'>{[code]}</text>
  <text class='right' bindtap='huanyizhang'>換一張</text>
</view>

CSS: 

.yanzhengma {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.yanzhengma .left {
  font-family: Arial;
  font-style: italic;
  font-weight: bold;
  border: 0;
  letter-spacing: 3px;
  font-size: 18px;
  background-color: #ccc;
  padding: 10rpx;
  margin-right: 20rpx;
  color: blue;
}

js:

Page({
 
  data: {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {
  //剛進(jìn)入頁面隨機(jī)先獲取一個(gè)
    this.createCode()
 
  },
  huanyizhang(){
    this.createCode()
  },
  createCode() {
    var code;
    //首先默認(rèn)code為空字符串
    code = '';
    //設(shè)置長度，這里看需求，我這里設(shè)置了4
    var codeLength = 4;
    //設(shè)置隨機(jī)字符
    var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
    //循環(huán)codeLength 我設(shè)置的4就是循環(huán)4次
    for (var i = 0; i < codeLength; i++) {
      //設(shè)置隨機(jī)數(shù)范圍,這設(shè)置為0 ~ 36
      var index = Math.floor(Math.random() * 36);
      //字符串拼接 將每次隨機(jī)的字符 進(jìn)行拼接
      code += random[index];
    }
    //將拼接好的字符串賦值給展示的code
    this.setData({
      code: code
    })
  },

 
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手