原生js实现数字字母混合验证码的简单实例

时间：2021-05-25

本文实例讲述了原生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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章