JS小案例：生成不重复字符随机验证码

效果图：

[图片]

思路：

一、结构样式

• 创建一个包含验证码输入框和按钮的HTML表单。
• 创建一个JavaScript文件来处理验证码生成和验证。
• 在JavaScript文件中，定义一个函数来生成验证码。
• 在函数中，定义一个包含所有可能字符的字符串。
• 使用JavaScript的Math.random()方法生成一个随机数。
• 使用随机数作为索引来从字符串中选择一个字符。
• 将选定的字符添加到验证码字符串中。
• 重复步骤3和步骤4，直到验证码字符串达到所需长度。
• 将验证码字符串显示在验证码输入框中。

二、JS部分不考虑字符是否重复

// 定义一个包含所有可能字符的字符串
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

// 定义一个函数来生成验证码
function generateCaptcha() {
  // 创建一个空字符串来存储验证码
  let captcha = "";

  // 循环4次来生成4位验证码
  for (let i = 0; i < 4; i++) {
    // 使用Math.random()方法生成一个随机数
    const randomNumber = Math.random();

    // 使用随机数作为索引来从字符串中选择一个字符
    const char = chars[Math.floor(randomNumber * chars.length)];

    // 将选定的字符添加到验证码字符串中
    captcha += char;
  }

  // 返回验证码字符串
  return captcha;
}

// 将验证码显示在验证码输入框中
document.getElementById("captcha-input").value = generateCaptcha();

现在我们已经能够实现需求效果；但是现在我们所获取的4位验证码有重复的字母，我们在完善一下；考虑字符重复情况。

不考虑字符重复情况

// 定义一个包含所有可能字符的字符串
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

// 定义一个函数来生成验证码
function generateCaptcha() {
  // 创建一个空字符串来存储验证码
  let captcha = "";

  // 创建一个空数组来存储已生成的字符
  const generatedChars = [];

  // 循环4次来生成4位验证码
  for (let i = 0; i < 4; i++) {
    // 使用Math.random()方法生成一个随机数
    const randomNumber = Math.random();

    // 使用随机数作为索引来从字符串中选择一个字符
    let char = chars[Math.floor(randomNumber * chars.length)];

    // 判断是否已经生成过该字符
    while (generatedChars.includes(char)) {
      // 如果已经生成过，则重新生成一个字符
      randomNumber = Math.random();
      char = chars[Math.floor(randomNumber * chars.length)];
    }

    // 将选定的字符添加到验证码字符串中
    captcha += char;

    // 将选定的字符添加到已生成的字符数组中
    generatedChars.push(char);
  }

  // 返回验证码字符串
  return captcha;
}

// 将验证码显示在验证码输入框中
document.getElementById("captcha-input").value = generateCaptcha();