欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序實現(xiàn)隨機驗證碼功能

 更新時間:2022年05月24日 08:17:19   作者:子謙呀  
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)隨機驗證碼功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)隨機驗證碼的具體代碼,供大家參考,具體內容如下

效果圖:

小程序上經常會有一些注冊 申請頁面需要用到隨機驗證碼。具體實現(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) {
  //剛進入頁面隨機先獲取一個
    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');
    //循環(huán)codeLength 我設置的4就是循環(huán)4次
    for (var i = 0; i < codeLength; i++) {
      //設置隨機數(shù)范圍,這設置為0 ~ 36
      var index = Math.floor(Math.random() * 36);
      //字符串拼接 將每次隨機的字符 進行拼接
      code += random[index];
    }
    //將拼接好的字符串賦值給展示的code
    this.setData({
      code: code
    })
  },

 
})

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論