likes
comments
collection
share

JS小案例——获取随机验证码

作者站长头像
站长
· 阅读数 2

效果图：

JS小案例——获取随机验证码

思路：

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