原生JS生成指定位數(shù)的驗(yàn)證碼
使用原生JS生成指定位數(shù)的驗(yàn)證碼,驗(yàn)證碼包括字母和數(shù)字
##思路:使用String的fromCharCode方法將給定范圍的隨機(jī)數(shù)轉(zhuǎn)為大小寫字母,再通過(guò)隨機(jī)數(shù)決定數(shù)組當(dāng)前位置為大寫字母,小寫字母或者是數(shù)字,函數(shù)傳入的參數(shù)當(dāng)做該數(shù)組的長(zhǎng)度,隨機(jī)填好數(shù)組后,對(duì)數(shù)組內(nèi)的元素做分情況處理:當(dāng)該數(shù)組內(nèi)沒有數(shù)字時(shí),需要隨機(jī)修改一個(gè)字母為一個(gè)隨機(jī)的數(shù)字;當(dāng)該數(shù)組沒有字母時(shí),需隨機(jī)修改一個(gè)數(shù)字為大寫或者小寫字母;正常情況下的有字母也有數(shù)字不做處理,每個(gè)判斷語(yǔ)句的最后使用數(shù)組的join方法將該數(shù)組轉(zhuǎn)換為字符串并return。
function verificationCode(num) {
var arr = [];
var letterFlag = false;
var numberFlag = false;
for (i = 0; i < num; i++) {
// 獲取隨機(jī)大寫字母
var uppercase = String.fromCharCode(Math.round(Math.random() * 25 + 65));
// 獲取隨機(jī)小寫字母
var lower = String.fromCharCode(Math.round(Math.random() * 25 + 97));
// 獲取隨機(jī)數(shù)字
var number = Math.round(Math.random() * 9);
// 獲取0-2的隨機(jī)數(shù)來(lái)隨機(jī)決定該位置是大寫字母,小寫字母或者是數(shù)字
var temp = Math.round(Math.random() * 2)
if (temp == 0) {
arr[i] = uppercase;
} else if (temp == 1) {
arr[i] = lower;
} else {
arr[i] = number;
}
}
// 檢查arr是否同時(shí)有字母與數(shù)字
for (var j = 0; j < arr.length; j++) {
if (Object.prototype.toString.call(arr[j]) == "[object String]") {
letterFlag = true;
}
if (typeof(arr[j]) == 'number') {
numberFlag = true;
}
}
// 對(duì)不同情況做處理
// 字母數(shù)字都有
if (letterFlag && numberFlag) {
return arr.join("");
}
// 沒有字母時(shí)
if (letterFlag == false && numberFlag == true) {
uppercase = String.fromCharCode(Math.round(Math.random() * 25 + 65));
lower = String.fromCharCode(Math.round(Math.random() * 25 + 97));
temp = Math.round(Math.random() * 1)
if (temp == 0) {
arr[Math.round(Math.random() * (num - 1))] = uppercase;
} else {
arr[Math.round(Math.random() * (num - 1))] = lower;
}
return arr.join("");
}
// 沒有數(shù)字時(shí)
if (letterFlag == true && numberFlag == false) {
number = Math.round(Math.random() * 9);
arr[Math.round(Math.random() * (num - 1))] = number;
return arr.join("");
}
}
var code = verificationCode(10);
console.log(code);
運(yùn)行結(jié)果

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼
- H5+css3+js搭建帶驗(yàn)證碼的登錄頁(yè)面
- 原生js生成圖片驗(yàn)證碼
- js+h5 canvas實(shí)現(xiàn)圖片驗(yàn)證碼
- js+canvas繪制圖形驗(yàn)證碼
- JavaScript實(shí)現(xiàn)簡(jiǎn)單驗(yàn)證碼
- Jsp生成頁(yè)面驗(yàn)證碼的方法[附代碼]
- JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖)
- js實(shí)現(xiàn)簡(jiǎn)單的驗(yàn)證碼
- js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
相關(guān)文章
用戶引導(dǎo)插件driverjs的基本使用以及彈窗樣式修改方法
Driver.js是一個(gè)強(qiáng)大的、輕量級(jí)、使用原生JavaScript引擎開發(fā)的庫(kù),用于在頁(yè)面聚焦用戶的關(guān)注點(diǎn),下面這篇文章主要介紹了用戶引導(dǎo)插件driverjs的基本使用以及彈窗樣式修改方法,需要的朋友可以參考下2024-04-04
moment.js輕松實(shí)現(xiàn)獲取當(dāng)前日期是當(dāng)年的第幾周
這篇文章主要介紹了moment.js輕松實(shí)現(xiàn)獲取當(dāng)前日期是當(dāng)年的第幾周,需要的朋友可以參考下2015-02-02
JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動(dòng)效果,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
使用JavaScript制作待辦事項(xiàng)列表的示例代碼
這篇文章主要介紹了如何使用 JavaScript創(chuàng)建待辦事項(xiàng)列表HTML的完整信息和教程,文中但是示例代碼講解詳細(xì),感興趣的同學(xué)可以動(dòng)手試一試2022-01-01
select2 ajax 設(shè)置默認(rèn)值,初始值的方法
今天小編就為大家分享一篇select2 ajax 設(shè)置默認(rèn)值,初始值的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
javascript 系統(tǒng)文件夾文件操作及參數(shù)介紹
javascript文件操作包括寫入文件、當(dāng)前目錄文件、讀文件、刪除文件、批量刪除,未刪除文件夾,刪除不了當(dāng)前目錄文件等等,感興趣的朋友可以參考下2013-01-01
簡(jiǎn)單聊聊JavaScript的事件循環(huán)機(jī)制
前端開發(fā)的童鞋應(yīng)該都知道,JavaScript是一門單線程的腳本語(yǔ)言,這就意味著JavaScript 代碼在執(zhí)行的時(shí)候,只有一個(gè)主線程來(lái)執(zhí)行所有的任務(wù),同一個(gè)時(shí)間只能做同一件事情,這篇文章主要給大家介紹了關(guān)于JavaScript事件循環(huán)機(jī)制的相關(guān)資料,需要的朋友可以參考下2022-03-03

