<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机验证码简单制作</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.auth-code{
display: inline-block;
width: 100px;
margin: 100px 0 0 100px;
padding: 10px 16px 10px 10px;
text-align: center;
letter-spacing: 6px;
background: #e3e3e3;
cursor: pointer;
}
.auth-code+img{
height: 24px;
position: relative;
right: 28px;
top: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 验证码展示 -->
<div class="wrap"><div class="auth-code">E2F7</div><img src="images/reload.png" alt="reload"></div>
</body>
<script type="text/javascript">
// 获取元素
var authCode = document.querySelector('.auth-code');
var reload = document.querySelector("img[alt=reload]");
//62个英文字母大小写加0-9数字的字符串
var theCodes = "abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ0123456789";
// 通过随机索引连续四次获取随机验证码
function getRanCodes(theCodes){
// 创建一个空的字符串来接收得到的四位验证码
var str = "";
for (var i = 0; i < 4; i++) {
// 通过字符串中的charAt()方法获取每一个字符
str += theCodes.charAt(getRanIndex(0,62));
}
authCode.innerHTML = str;
}
// 获取两个数字之间的随机索引随机索引
/*function getRanIndex(m,n){
// 将传入的参数转换成数值类型
var num1 = Number(m);
var num2 = Number(n);
// 判断转换后的参数是否是NaN
if(isNaN(num1) || isNaN(num2)){
// 返回索引0-61,向下取整
return Math.floor(Math.random()*62);
}else{
// 如果不是NaN就根据m和n的大小返回m-n之间的随机索引
return (m > n) ? Math.floor(Math.random()*(m-n)) + m : Math.floor(Math.random()*(n-m));
}
} */
function getRanIndex(m,n){
// 如果不是NaN就根据m和n的大小返回m-n之间的随机索引
return (m > n) ? Math.floor(Math.random()*(m-n)) + m : Math.floor(Math.random()*(n-m));
}
// 调用函数刷新页面获取验证码
getRanCodes(theCodes);
// 点击验证码,刷新
/* authCode.onclick = function(){
getRanCodes(theCodes);
} */
authCode.onclick = reload.onclick = function(){
getRanCodes(theCodes);
}
</script>
</html>
