小編給大家分享一下如何基于JS實現(xiàn)一個隨機生成驗證碼功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
效果展示
實現(xiàn)原理
1. html：一般就是一個div：
，樣式根據(jù)需求設計。2. JS：1）將所有的驗證碼所用的字符放在一個字符串中
2）在這個字符串的字符個數(shù)以內(nèi)，隨機生成索引號
3）根據(jù)索引號查找對應字符，拼接成驗證碼的字符串
代碼實現(xiàn)
HTML：
CSS：
重慶分公司
重慶分公司
* {
margin: 0;
padding: 0;
}
div {
width: 80px;
height: 30px;
font-size: 18px;
line-height: 30px;
text-align: center;
color: #333;
border: 1px solid red;
margin: 100px auto;
cursor: pointer;
}JavaScript：
var codeStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var oDiv = document.getElementById('code');
// 用來生成隨機整數(shù)
function getRandom(n, m) { // param: (Number, Number)
n = Number(n);
m = Number(m);
// 確保 m 始終大于 n
if (n > m) {
var temp = n;
n = m;
m = temp;
}
// 下有詳細說明
return Math.floor(Math.random()*(m - n) + n);
}
// 將隨機生成的整數(shù)下標對應的字母放入div中
function getCode() {
var str = '';
// 驗證碼有幾位就循環(huán)幾次
for (var i = 0;i < 4;i ++) {
var ran = getRandom(0, 62);
str += codeStr.charAt(ran);
}
oDiv.innerHTML = str;
}
getCode();// 調用函數(shù)，頁面刷新也會刷新驗證碼
// 點擊刷新驗證碼
oDiv.onclick = function(){
getCode();
}代碼分析
JS：
1）將所有的驗證碼所用的字符放在一個字符串中
-- > 代碼第1行，除了字母數(shù)字也可放入中文漢字等。
2）在這個字符串的字符個數(shù)以內(nèi)，隨機生成索引號
-- > 第4行的函數(shù)用于生成隨機整數(shù)，參數(shù) (n, m)為數(shù)字，Number()確保是數(shù)字
默認m > n，防止傳參有誤，用if判斷后改正
Math.random() -- > [0,1)
Math.random() * (m - n) -- > [0, m - n)
Math.random() * (m - n) + n -- > [n, m)
為了能將codeStr所有的下標都取到，上述m若是codeStr.length，想要取值能取到最后一位，再使用Math.floor()向下取整。
n 為 0，m 為 codeStr.length 則隨機范圍為codeStr的所有元素下標。例(n, m) -- > (0, 62)計算后的取值范圍：下標為[0, 61]的整數(shù)。
3）根據(jù)下標查找對應元素，拼接成驗證碼的字符串
第17行的函數(shù)getCode()獲取字符串中對應元素，并拼接成字符串返回到頁面中。最后點擊div可不斷生成隨機驗證碼。
完整代碼