2）在這個字符串的字符個數以內，隨機生成索引號
3）根據索引號查找對應字符，拼接成驗證碼的字符串
<div id="code"></div>
CSS：
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 div { 6 width: 80px; 7 height: 30px; 8 font-size: 18px; 9 line-height: 30px; 10 text-align: center; 11 color: #333; 12 border: 1px solid red; 13 margin: 100px auto; 14 cursor: pointer; 15 }
JavaScript：
1 var codeStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; 2 var oDiv = document.getElementById('code'); 3 // 用來生成隨機整數 4 function getRandom(n, m) { // param: (Number, Number) 5 n = Number(n); 6 m = Number(m); 7 // 確保 m 始終大於 n 8 if (n > m) { 9 var temp = n; 10 n = m; 11 m = temp; 12 } 13 // 下有詳細說明 14 return Math.floor(Math.random()*(m - n) + n); 15 } 16 // 將隨機生成的整數下標對應的字母放入div中 17 function getCode() { 18 var str = ''; 19 // 驗證碼有幾位就循環幾次 20 for (var i = 0;i < 4;i ++) { 21 var ran = getRandom(0, 62); 22 str += codeStr.charAt(ran); 23 } 24 oDiv.innerHTML = str; 25 } 26 getCode();// 調用函數，頁面刷新也會刷新驗證碼 27 // 點擊刷新驗證碼 28 oDiv.onclick = function(){ 29 getCode(); 30 }
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>
*有錯誤的地方歡迎指正
*轉載請注明出處