本文實例講述了原生js實現(xiàn)數(shù)字字母混合驗證碼的全部代碼，重點是注釋很詳細(xì)，便于大家理解，特分享給大家供大家參考。具體如下：
運行效果截圖如下：
具體代碼如下：
<!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"> //當(dāng)前驗證碼獲取的隨即范圍 var codeStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; //思想：0-61索引 只需要隨機生成4個索引，然后charAt可以獲取隨機4個索引。 var oDiv = document.getElementById("code"); function getRandom(n, m) { n = Number(n); //轉(zhuǎn)換n,m，結(jié)果不是數(shù)字就是NaN m = Number(m); if (isNaN(n) || isNaN(m)) { //判斷n,m,是不是有效數(shù)字，如果n或m其中一個傳入的不是數(shù)字 return Math.random(); //返回 【0-1）之間的隨機小數(shù) } if (n > m) { //如果n大于m，則交換位置 var temp = n; n = m; m = temp; } return Math.round(Math.random() * (m - n) + n); //返回，取m,n之間的隨機整數(shù)。 } function getCode() { var str = ""; //定義一個空字符串備用 for (var i = 0; i < 4; i++) { //遍歷4個索引 var ran = getRandom(0, 61); //調(diào)用getRandom方法，隨機獲取一個索引0-61里的隨機索引 str += codeStr.charAt(ran); //把codeStr字符串里，我們指定獲取ran（這個4個索引）； } oDiv.innerHTML = str; //呈現(xiàn)在頁面上 } getCode(); //調(diào)用方法 oDiv.onclick = function () { getCode(); }</script></body></html> 
