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