微信小程序實現隨機驗證碼功能

小程序上常常會有一些註冊 申請頁面須要用到隨機驗證碼。具體實現方法很少說 直接上代碼

<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: {
  
  },
  
  /** * 生命週期函數--監聽頁面加載 */
  onLoad: function(options) {
  //剛進入頁面隨機先獲取一個
    this.createCode()
  
  },
  huanyizhang(){
    this.createCode()
  },
  createCode() {
    var code;
    //首先默認code爲空字符串
    code = '';
    //設置長度，這裏看需求，我這裏設置了4
    var codeLength = 4;
    //設置隨機字符
    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');
    //循環codeLength 我設置的4就是循環4次
    for (var i = 0; i < codeLength; i++) {
      //設置隨機數範圍,這設置爲0 ~ 36
      var index = Math.floor(Math.random() * 36);
      //字符串拼接 將每次隨機的字符 進行拼接
      code += random[index];
    }
    //將拼接好的字符串賦值給展現的code
    this.setData({
      code: code
    })
  },
 
  
})
複製代碼

以上就是本文的所有內容，但願對你們的學習有所幫助