溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何基于JS實現(xiàn)一個隨機生成驗證碼功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
效果展示
實現(xiàn)原理
1. html：一般就是一個div： <div id="code"></div> ，樣式根據需求設計。
2. JS：1）將所有的驗證碼所用的字符放在一個字符串中
2）在這個字符串的字符個數(shù)以內，隨機生成索引號
3）根據索引號查找對應字符，拼接成驗證碼的字符串
代碼實現(xiàn)
HTML：
<div id="code"></div>
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ù)以內，隨機生成索引號
-- > 第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）根據下標查找對應元素，拼接成驗證碼的字符串
第17行的函數(shù)getCode()獲取字符串中對應元素，并拼接成字符串返回到頁面中。最后點擊div可不斷生成隨機驗證碼。
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隨機生成驗證碼</title>
<style>
* {
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;
}
</style>
</head>
<body>
<div id="code"></div>
<script>
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();
}
</script>
</body>
</html>以上是“如何基于JS實現(xiàn)一個隨機生成驗證碼功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
