效果展示
實現原理
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 = ''; // 驗證碼有幾位就循環幾次 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 = ''; // 驗證碼有幾位就循環幾次 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實現一個隨機生成驗證碼功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
