生成4位不重复验证码

最新推荐文章于 2022-05-04 16:14:26 发布

程序媛草莓酱

最新推荐文章于 2022-05-04 16:14:26 发布

阅读量1.6k

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_43248448/article/details/105894420

版权

JavaScript 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何生成四位不重复的验证码。首先，从包含62个字符的库中，通过生成随机数作为索引来选取字符。为了避免重复，每次选取前需检查字符是否已存在于验证码中。在确保不重复的基础上，利用while循环动态调整，直至得到四个不重复的字符组成验证码。最终实现了一个动态生成不重复验证码的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

获取四位不重复的验证码——脑补某网站登录页面

思路

加载页面时，生成4位验证码放置到矩形框中，点击后重新生成新的4位验证码，在拼接之前判断该字符是否已经存在。

实现

页面搭建与基本样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .codeBox{
      width: 100px;
      height: 40px;
      line-height: 40px;
      margin: 20px;
      border: 1px solid lightcoral;
      text-align: center;
      cursor: pointer;
      font-size: 20px;
      letter-spacing: 5px;
    }
  </style>
</head>
<body>
  <div class="codeBox" id="codeBox">AFDE</div>
</body>
</html>

功能实现与优化

思路：先建立一个包含62个字符的字符库，其中包含了所有的字母、数字，然后通过生成0~61之间的随机数索引 ( 如何生成指定范围的随机数很重要哦！) ，通过这个随机索引找到指定的字符，并把它显示出来。

一个重要的公式——获取[n,m]之间的随机整数：
Math.round(Math.random()*(m-n)+n)

let codeBox = document.getElementById("codeBox");     // 获取div元素

function createCode(){
	let area = "0123456789A…Za…z",     // 62个,省略了中间的字母
	codeText = "";
	for(let i = 1; i <= 4; i++){       // 拼接4个
		let random = Math.round(Math.random() * (61 - 0) + 0),
			char = area.charAt(random);
		codeText += char;        // 挨个拼接
	}
	codeBox.innerHTML = codeText;           // 放到盒子里
}
createCode();              //  一加载页面就执行这个方法，初始化
codeBox.onclick = creatCode;            // 点击时再执行一次，注意这里没有()，因为不是立即执行

以上代码实现了生成四位随机验证码的功能，现在我们把需求稍作修改，希望获得四位随机不重复的验证码。

于是我们需要在拼接遍历到的char之前做一个判断：如果当前的char已经存在了，就不往里加；如果不存在，就拼接进来。即：在codeText += char的外层套一个if条件判断。注意：同一字母的大小写也算作重复~

if(!charText.toUpperCase().includes(char.toUpperCase())){
	codeText += char;
}

把codeText字符串和char字符都转换为大写，再判断字符串charText中是否包含(includes)字符char，若不包含，取反后条件为真，进入判断。

但是这样在少数情况下又会导致尴尬的结果，总共循环4次，如果有一次有重复(被pass掉了，没有拼接进来)，就会只有3个字符；有两次重复，就只剩了2个字符……

在不确定循环次数的情况下，我们用while代替for循环，于是最终代码如下：

let codeBox = document.getElementById("codeBox");    

function createCode(){
	let area = "0123456789A…Za…z",     
	codeText = "";
	while(codeText.length < 4){       
		let random = Math.round(Math.random() * (61 - 0) + 0),
			char = area.charAt(random);
		if(!codeText .toUpperCase().includes(char.toUpperCase())){
			codeText += char;
		}      
	}
	codeBox.innerHTML = codeText;          
}
createCode();          
codeBox.onclick = createCode;

效果就是酱紫的：
在这里插入图片描述