基于JS實現一個隨機生成驗證碼功能
效果展示
實現原理
1. html：一般就是一個div： <div id="code"></div> ，樣式根據需求設計。
2. JS：1）將所有的驗證碼所用的字符放在一個字符串中
2）在這個字符串的字符個數以內，隨機生成索引號
3）根據索引號查找對應字符，拼接成驗證碼的字符串
代碼實現
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');
// 用來生成隨機整數
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);
}
// 將隨機生成的整數下標對應的字母放入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();// 調用函數，頁面刷新也會刷新驗證碼
// 點擊刷新驗證碼
oDiv.onclick = function(){
getCode();
}
代碼分析
JS：
1）將所有的驗證碼所用的字符放在一個字符串中
-- > 代碼第1行，除了字母數字也可放入中文漢字等。
2）在這個字符串的字符個數以內，隨機生成索引號
-- > 第4行的函數用于生成隨機整數，參數 (n, m)為數字，Number()確保是數字
默認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]的整數。
3）根據下標查找對應元素，拼接成驗證碼的字符串
第17行的函數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');
// 用來生成隨機整數
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);
}
// 將隨機生成的整數下標對應的字母放入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();// 調用函數，頁面刷新也會刷新驗證碼
// 點擊刷新驗證碼
oDiv.onclick = function(){
getCode();
}
</script>
</body>
</html>
總結
以上所述是小編給大家介紹的基于JS實現一個隨機生成驗證碼功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
下拉選擇框，是我們在網頁中經常使用到的，在本文為大家詳細介紹下使用js使用的下拉選擇框2013-11-11
在本篇文章里小編給大家整理的是關于不刷新網頁就能鏈接新的js文件方法總結，需要的朋友們參考下。2020-03-03
JavaScript 核心參考教程RegExp對象,學習正則表達式的朋友可以參考下。2009-10-10
js中,new Date([params]),參數傳遞有五種方式,本文給大家講解的非常詳細,對new Date()參數相關知識感興趣的朋友跟隨小編一起看看吧2023-11-11
這篇文章主要介紹了微信小程序左滑刪除功能開發(fā)案例詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
本文給大家總結了js編碼規(guī)范知識，非常實用，在日常程序開發(fā)中經常可以用到，大家務必掌握2016-06-06
詳解JavaScript節(jié)流函數中的Throttle
