版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_36282409/article/details/87536993
验证码：基本功能实现方式：
1.真实项目中的验证码：
真实项目中验证码一般都是后台处理的，后台返回给客户端展示的是一个图片（图片中包含了验证码）
验证码目的：防止批量注入（防止信息造假，安全）
2.常见的验证码形式：
1.字母+数字
2.问答
3.12306 选择图片
4.成语填空
5.图片拼图
6.滑动拖拽
7…
案例：
效果图：
1.HTML中样式实现如下：
<style>
*{
padding:0;
margin: 0;
}
#codeBox{
margin:50px auto;
width: 100px;
height: 40px;
border: 1px solid blue;
text-align: center;
line-height:40px;
letter-spacing: 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="codeBox">
AbN5m
</div>
<script src="js/test01.js"></script>
</body>
2.js中执行如下：
/**
-
@author lyj
*/ -
需求：
-
利用字母+数字，实现5位随机验证码
*/var codeBox=document.getElementById(‘codeBox’);
//生成5位随机验证码：取值范围var areaStr=‘0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM’;
//共62位（0~61）
/*
areaStr[2]
areaStr.charAt(2)
*/
var result='';
for(var i=0;i<5;i++){
//1.随机获取一个0~61之间的整数，作为接下来获取字符的索引
var ran=Math.round(Math.random()*61);
//2.根据索引获取一个随机字符
var char=areaStr.charAt(ran);
//3.将每次循环获取的字符放在存放的结果中
result +=char;
}
codeBox.innerHTML=result; //4.将获取到的result结果，放到元素当中。