本文實例講述了原生js實現數字字母混合驗證碼的全部代碼，重點是注釋很詳細，便于大家理解，特分享給大家供大家參考。具體如下：
運行效果截圖如下：
具體代碼如下：
<!DOCTYPE html><html><head> <meta charset="gb2312"> <title></title> <style type="text/css"> body, div { margin: 0; padding: 0; font-size: 18px; font-family: "微軟雅黑"; -webkit-user-selelct: none; } #code { position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -50px; width: 100px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #ff0000; cursor: pointer; letter-spacing: 5px; } </style></head><body><div id="code"> xdF2</div><script type="text/javascript"> //當前驗證碼獲取的隨即范圍 var codeStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; //思想：0-61索引 只需要隨機生成4個索引，然后charAt可以獲取隨機4個索引。 var oDiv = document.getElementById("code"); function getRandom(n, m) { n = Number(n); //轉換n,m，結果不是數字就是NaN m = Number(m); if (isNaN(n) || isNaN(m)) { //判斷n,m,是不是有效數字，如果n或m其中一個傳入的不是數字 return Math.random(); //返回 【0-1）之間的隨機小數 } if (n > m) { //如果n大于m，則交換位置 var temp = n; n = m; m = temp; } return Math.round(Math.random() * (m - n) + n); //返回，取m,n之間的隨機整數。 } function getCode() { var str = ""; //定義一個空字符串備用 for (var i = 0; i < 4; i++) { //遍歷4個索引 var ran = getRandom(0, 61); //調用getRandom方法，隨機獲取一個索引0-61里的隨機索引 str += codeStr.charAt(ran); //把codeStr字符串里，我們指定獲取ran（這個4個索引）； } oDiv.innerHTML = str; //呈現在頁面上 } getCode(); //調用方法 oDiv.onclick = function () { getCode(); }</script></body></html> 
