<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>随机验证码</title>
<style>
.char-code {
width: 150px;
height: 25px;
line-height: 35px;
font-size: 25px;
text-align: center;
/* border: 1px solid blanchedalmond; */
margin: 20px auto;
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<div class="char-code" id="charCode"></div>
<input type="text" id="text">
<input type="button" value=" 获取验证码" id="btn">
<script>
// strCode 这个字符串里如果已经有这个字符了 就不拼接
function createCode(len) {
// 如果传递进来的值 不是数字类型或者是NaN 我们需要设置一个默认值
// if (typeof len !== 'number' || isNaN(len)) {
// len = 4;
// }
var len = len || 4;
var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var strCode = '';
// 这个拼接的字符串strCode 不够len个字符 就会一直循环下去
while (strCode.length < len) {
// 生成一个 0~61的随机索引
var ind = Math.round(Math.random() * (str.length - 1));
// 根据索引ind 获取相应的字符
var char = str[ind];
// 如果strCode不存在这个字符 再进行拼接
if (!strCode.includes(char)) {
// 进行字符拼接
// 将每一次得到的字符拼接起来
strCode += char;
// i++; //拼接一次就累加一次
}
}
return strCode;
}
// console.log(createCode())
var btn = document.getElementById('btn');
var charCode = document.getElementById('charCode');
var text = document.getElementById('text');
btn.onclick = function () {
charCode.innerHTML = createCode(text.value);
}
</script>
</body>
</html>
