原生js实现数字字母混合验证码的简单实例
更新时间：2015年12月10日 08:58:49 作者：乐观地摸摸头
这篇文章主要介绍了原生js实现数字字母混合验证码的简单实例，注释很详细，感兴趣的小伙伴们可以参考一下
本文实例讲述了原生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>
相关文章
利用innerHTML代替createElement来动态添加网页内容已成为一种普遍的认识。但在商务应用，大数据的datagrid屡见不鲜，就算是innerHTML也捉襟见肘，于是人们又开发了分时加载的技术了（利用setTimeout）。2009-12-12
from表单多个按钮提交用onclick跳转不同action
这篇文章主要介绍了from表单多个按钮提交用onclick跳转不同action,需要的朋友可以参考下2014-04-04
全面解析Bootstrap中transition、affix的使用方法
这篇文章主要为大家详细解析了Bootstrap中transition、affix的使用方法，感兴趣的朋友可以参考一下2016-05-05
这篇文章主要介绍了JavaScript实现的反序列化json字符串操作,结合实例形式分析了eval与JSON.parse两种反序列化json字符串的相关操作技巧,需要的朋友可以参考下2018-07-07
每种语言都有它特别的地方，对于JavaScript来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节，与大家分享。2011-09-09
这篇文章主要为大家详细介绍了js实现网页图片轮换播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
通过RegExp实现客户端验：让文本框只允许输入数字、文本框只允许输入中文、邮箱输入格式的判断等等，具体实现如下，感兴趣的朋友可以参考下哈2013-05-05
当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。2015-05-05
小程序的openid相当重要,它是用户的唯一标识id,牵扯的支付,登录,授权等,下面这篇文章主要给大家介绍了关于微信小程序获取用户openid的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了JS将滑动门改为选项卡（需鼠标点击）的实现方法,涉及JavaScript页面元素遍历及样式替换的相关技巧,再通过onmouseover与onclick即可分别实现滑动门与选项卡两种效果,需要的朋友可以参考下2015-09-09
最新评论