版权声明:本文为博主原创文章,未经博主允许不得转载。 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结果,放到元素当中。