验证码案例
1.四位可能重复 for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.coedBox {
margin: 20px;
cursor: pointer;
width: 150px;
height: 50px;
line-height: 50px;
font-size: 30px;
color: #9d2121;
text-align: center;
background-color: lightcyan;
letter-spacing: 5px;
user-select: none;
/*不允许用户复制*/
}
</style>
</head>
<body>
<div class="coedBox">
YQa3
</div>
<!--
验证码 数字＋字母组合
拼图
数学运算
按顺序点击
选图片 旋转图片
-->
<script>
var box = document.querySelector(".coedBox");
/* 生成四位验证码，并且放入到codeBox黑盒子中 */
function createCode() {
//area 取值范围 所以0~61 获取某个字符area.charAt([索引])
var area = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
// 循环四次 每一次都创建一个0-61之间的随机索引 根据索引取出字符 拼接在一起 就是想要的验证码
var code = '';//存放拼接起来的结果
for (var i = 0; i < 4; i++) {
var ran = Math.round(Math.random() * (61 - 0) + 0),//Math.round(Math.random()*[m-n]+n)
char = area.charAt(ran);
code += char; //把字符拼接起来
}
//把生成的验证码放置在盒子中
box.innerHTML = code;
}
/* 加载页面的时候执行一次 */
createCode();
// 点击盒子重新执行方法
box.onclick = createCode;//不写小括号是吧方法给到点击事件
</script>
</body>
</html>
2.四位不重复 while循环 制作验证码
思路
-
不重复的验证码 每一次取出的字符 不一定要拼接进去 只有之前已经拼接好的验证码中，没有这个字符 我们才拼接
-
不确定循环的次数 只有当验证码已经拼成四位后，才会结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.coedBox {
margin: 20px;
cursor: pointer;
width: 150px;
height: 50px;
line-height: 50px;
font-size: 30px;
color: #9d2121;
text-align: center;
background-color: lightcyan;
letter-spacing: 5px;
user-select: none;
/*不允许用户复制*/
}
</style>
</head>
<body>
<div class="coedBox">
YQa3
</div>
<!--
验证码 数字＋字母组合
拼图
数学运算
按顺序点击
选图片 旋转图片
-->
<script>
/* ----不重复的验证码 每一次取出的字符 不一定要拼接进去 只有之前已经拼接好的验证码中，没有这个字符 我们才拼接
* +不确定循环的次数 只有当验证码已经拼成四位后，才会结束
*
*
*/
var box = document.querySelector(".coedBox");
/* 生成四位验证码，并且放入到codeBox黑盒子中 */
function createCode() {
//area 取值范围 所以0~61 获取某个字符area.charAt([索引])
var area = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
// 循环四次 每一次都创建一个0-61之间的随机索引 根据索引取出字符 拼接在一起 就是想要的验证码
var code = '';//存放拼接起来的结果
while(code.length<4){
var ran = Math.round(Math.random() * (61 - 0) + 0),//Math.round(Math.random()*[m-n]+n)
char = area.charAt(ran);
//验证当前获取的字符在已有的验证码中是否存在 如果存在就不累加了[忽略大小写]
if(code.toLowerCase().indexOf(char.toLowerCase())===-1){
code += char; //把字符拼接起来
}
}
//把生成的验证码放置在盒子中
box.innerHTML = code;
}
/* 加载页面的时候执行一次 */
createCode();
// 点击盒子重新执行方法
box.onclick = createCode;//不写小括号是吧方法给到点击事件
</script>
</body>
</html>
