效果图：
# 思路：
一加载页面，就生成四位验证码，放置到CODEBOX盒子中；当我们点击CODEBOX盒子的时候，需要重新生成四位验证码，放置到盒子中！
- 四位验证码规则：随机获取数字+字母（大小写）四位即可
# 一、结构样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取随机验证码</title>
<!-- IMPORT CSS -->
<style>
* {
margin: 0;
padding: 0;
user-select: none;
}
.codeBox {
box-sizing: border-box;
margin: 20px;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid lightcoral;
cursor: pointer;
font-size: 20px;
letter-spacing: 5px;
}
</style>
</head>
<body>
<div class="codeBox" id="codeBox"></div>
</body>
</html>
# 二、JS部分
# 不考虑字符是否重复
let codeBox = document.getElementById('codeBox');
/* 创建验证码，并把其放在CODEBOX盒子中 */
function createCode() {
// 验证码的取值范围（索引范围：0~61）
// 随机获取四个（Math.random()）：随机获取四个0~61之间的索引值，基于这个值到AREA范围中取四个字符，拼成我们需要的四位验证码即可
let area = '0123456789QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm',
codeText = '';
for (let i = 1; i <= 4; i++) {
// 每一次循环获取一个随机的索引
let ran = Math.round(Math.random() * (61 - 0) + 0),
// 基于索引获取对应的字符
char = area.charAt(ran);
// 拼接到结果中
codeText += char;
}
codeBox.innerHTML = codeText;
}
// 加载页面就执行一次
createCode();
// 点击CODEBOX盒子重新生成（此处函数后面不能加小括号，因为我们不是立即把函数执行，而是想让点击的时候才执行）
codeBox.onclick = createCode;
现在我们已经能够实现需求效果；但是现在我们所获取的4位验证码有重复的字母，我们在完善一下；
# 考虑字符重复情况
// 当前需求下，到底循环多少次就已经不再是准确的了
// 对于不确定具体循环次数的循环，我们一般用while循环
// while(条件){ } 只要条件成立就会一直循环
function createCode() {
let area = '0123456789QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm',
codeText = '';
while (codeText.length < 4) {
let ran = Math.round(Math.random() * (61 - 0) + 0),
char = area.charAt(ran);
if (!codeText.toUpperCase().includes(char.toUpperCase())) {
codeText += char;
}
}
codeBox.innerHTML = codeText;
}
createCode();
codeBox.onclick = createCode;