微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼功能
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:
小程序上經(jīng)常會有一些注冊 申請頁面需要用到隨機(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ī)先獲取一個 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í)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 功能函數(shù)小結(jié)(手機(jī)號驗(yàn)證*、密碼驗(yàn)證*、獲取驗(yàn)證碼*)
- 微信小程序6位或多位驗(yàn)證碼密碼輸入框功能的實(shí)現(xiàn)代碼
- 微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例
- 微信小程序?qū)崿F(xiàn)倒計時60s獲取驗(yàn)證碼
- 微信小程序如何獲取手機(jī)驗(yàn)證碼
- 微信小程序綁定手機(jī)號獲取驗(yàn)證碼功能
- 微信小程序?qū)崿F(xiàn)驗(yàn)證碼獲取倒計時效果
- 微信小程序?qū)崿F(xiàn)發(fā)送驗(yàn)證碼按鈕效果
- 詳解如何使用微信小程序云函數(shù)發(fā)送短信驗(yàn)證碼
- 微信小程序?qū)崿F(xiàn)圖形驗(yàn)證碼
相關(guān)文章
深入理解ES6之?dāng)?shù)據(jù)解構(gòu)的用法
本文介紹了深入理解ES6之?dāng)?shù)據(jù)解構(gòu)的用法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01js根據(jù)鼠標(biāo)移動速度背景圖片自動旋轉(zhuǎn)的方法
這篇文章主要介紹了js根據(jù)鼠標(biāo)移動速度背景圖片自動旋轉(zhuǎn)的方法,實(shí)例分析了javascript操作鼠標(biāo)與圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02PHP自動加載autoload和命名空間的應(yīng)用小結(jié)
PHP的自動加載就是我們加載實(shí)例化類的時候,不需要手動去寫require來導(dǎo)入這個class.php文件,程序自動幫我們加載導(dǎo)入進(jìn)來這.篇文章主要介紹了PHP自動加載autoload和命名空的應(yīng)用,需要的朋友可以參考下2017-12-12JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06IE6/IE7中JavaScript json提示缺少標(biāo)識符、字符串或數(shù)字問題處理
這篇文章主要介紹了IE6/IE7中JavaScript json提示缺少標(biāo)識符、字符串或數(shù)字問題處理,需要的朋友可以參考下2014-12-12