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

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

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

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

效果圖：

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

<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)聽(tīng)頁(yè)面加載
   */
  onLoad: function(options) {
  //剛進(jìn)入頁(yè)面隨機(jī)先獲取一個(gè)
    this.createCode()
 
  },
  huanyizhang(){
    this.createCode()
  },
  createCode() {
    var code;
    //首先默認(rèn)code為空字符串
    code = '';
    //設(shè)置長(zhǎng)度，這里看需求，我這里設(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
    })
  },

 
})

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

您可能感興趣的文章:

相關(guān)文章

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