思路：

一加载页面，就生成四位验证码，放置到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;