模仿随机验证码-简单效果
简单模仿随机验证码效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单随机验证码-含字母</title>
<style type= text/css>
#div1 {
width: 100px;
height: 50px;
background: red;
text-align: center;
font-size: 30px;
line-height: 50px;
color: orange;
cursor: pointer;
}
</style>
<script>
/*
随机纯数字的验证码
随机0~9之间的随机数
parseInt(Math.random() * 10);
随机既有数字又有字母的验证码
0-9
a-z 97-122
A-Z 65-90
想个办法：随机0-99的整数
0-9 数字
65-90 转成大写字母
17-42 + 80 转成小写字母
*/
//封装的有大小写字母和数字的函数
function testCodeWithStr(n){//n为验证码的个数
var arr = [];//装随机数的数组
for(var i = 0; i < n; i++){
var num = parseInt(Math.random() * 100);//取0--100之间的随机数
if(num >= 0 && num <= 9){
arr.push(num);//将元素插入到数组的最后
}else if(num >= 17 && num <= 42){//17-42 + 80 转成小写字母
var str = String.fromCharCode(num + 80);//转成小写字母
arr.push(str);//将转成的小写字母插入到数组最后
}else if(num >= 65 && num <= 90){
var str = String.fromCharCode(num);//转成大写字母
arr.push(str);//将转成的小写字母插入到数组最后
}else{//如果没有随机到数，然后就在从小随机一边
i--;
}
}
return arr.join('');
}
/* //封装随机函数(纯数字)
function testCode(n){//n为验证码的个数
var arr = [];//装随机数的数组
for(var i = 0; i < n; i++){
var num = parseInt(Math.random() * 10);
arr.push(num);
}
return arr.join('');
}
*/
function btnClick(){
var oDiv = document.getElementById("div1");
oDiv.innerHTML = testCodeWithStr(5)//此处调用的是有字母和数字的函数
}
</script>
</head>
<body>
<div id = "div1" onclick = "btnClick();">12345</div>
</body>
</html>
效果：
