快捷導(dǎo)航

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

更新時間：2022年05月24日 08:17:19 作者：子謙呀

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)隨機驗證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

效果圖：

小程序上經(jīng)常會有一些注冊申請頁面需要用到隨機驗證碼。具體實現(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)入頁面隨機先獲取一個
    this.createCode()
 
  },
  huanyizhang(){
    this.createCode()
  },
  createCode() {
    var code;
    //首先默認(rèn)code為空字符串
    code = '';
    //設(shè)置長度，這里看需求，我這里設(shè)置了4
    var codeLength = 4;
    //設(shè)置隨機字符
    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è)置隨機數(shù)范圍,這設(shè)置為0 ~ 36
      var index = Math.floor(Math.random() * 36);
      //字符串拼接 將每次隨機的字符 進(jìn)行拼接
      code += random[index];
    }
    //將拼接好的字符串賦值給展示的code
    this.setData({
      code: code
    })
  },

 
})

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

您可能感興趣的文章:

相關(guān)文章

javascript實現(xiàn)了照片拖拽點擊置頂?shù)恼掌瑝Υa
這篇文章主要介紹了javascript實現(xiàn)了照片拖拽點擊置頂?shù)恼掌瑝Υa，效果非常不錯，這里推薦給大家，有需要的小伙伴可以參考下。
2015-04-04
JavaScript如何操作css
這篇文章主要介紹了JavaScript如何操作css，幫助大家更好的進(jìn)行前端開發(fā)，優(yōu)化網(wǎng)頁，感興趣的朋友可以了解下
2020-10-10
一文讓您了解document.forms和document.formName的兼容性分析
今天在代碼中不小心寫了兩個name相同的form表單,然后通過document.forms[formName]形式獲取到的只有第一個表單,然后深入學(xué)習(xí)了下document.forms[formName]和document.formName的區(qū)別和兼容性
2025-03-03
JavaScript封裝單向鏈表的示例代碼
這篇文章主要介紹了JavaScript如何封裝單向鏈表，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-09-09
JavaScript數(shù)組方法實例詳解
本文將通過實例為大家詳細(xì)介紹JavaScript中的數(shù)組的所有方法。文中的示例代碼講解詳細(xì)，對我們深入了解JavaScript數(shù)組有一定的幫助，需要的可以參考一下
2021-12-12
詳解webpack 打包文件體積過大解決方案（code splitting）
這篇文章主要介紹了webpack 打包文件體積過大解決方案（code splitting）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
自己做的模擬模態(tài)對話框?qū)崿F(xiàn)代碼
最近做完一個項目，發(fā)現(xiàn)瀏覽器兼容問題，模態(tài)對話框只有IE支持，但是IE9又不能支持帶框架的對話框，那個對話框的大小打死都設(shè)置不了，在網(wǎng)上查說因為好多功能被IE9屏蔽了，于是自己做了一個模擬對話框的東西
2012-05-05
js 獲取本地文件及目錄的方法(推薦)
下面小編就為大家?guī)硪黄猨s 獲取本地文件及目錄的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
js實現(xiàn)簡單掃雷
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單掃雷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
js給onclick賦值傳參數(shù)的兩種方法
這篇文章主要介紹了js給onclick賦值傳參數(shù)的兩種方法，有需要的朋友可以參考一下
2013-11-11