【Html.js——随机密码生成器】不能说的秘密（蓝桥杯真题-2338）【合集】

Rossy Yan

发布于 2025-02-03 08:54:36

6500

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

密码生成器是一个实用的随机密码生成软件，有了它，你就不用绞尽脑汁想复杂的密码来守护你的个人隐私，只要动一下手指，一个新的密码就会生成。如此好用的工具，下面就让我们亲自动手来制作一个吧～

准备步骤

本题已经内置了初始代码，打开实验环境，目录结构如下：

├── css
│   └── style.css
├── index.html
└── js
    └── generatePassword.js

其中：

css/style.css 是样式文件。
index.html 是主页面。
js/generatePassword.js 是需要补充代码的 js 文件。

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

目标效果

请完善 generatePassword.js 中的 generatePassword 函数，实现根据规则随机生成密码的功能。密码长度已由 input 框（id=passwordLength）的属性进行了限制最小 4，最大 20。

生成的密码必须包含已选中的选项且只能由已选中的选项组成。
特殊符号如下：!@#$%^&*(){}[]=<>/,. 。
本题封装方法时只需要考虑长度符合要求（ 4-20 ）且有已选中条件的情况，其他情况无需处理。

完成后，最终页面效果如下：

要求规定

生成的密码必须是随机的。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

判分标准

本题完全实现题目目标得满分，否则得 0 分。

通关代码✔️

//generatePassword.js
const resultEl = document.getElementById("result");
const lengthEl = document.getElementById("passwordLength");
const uppercaseEl = document.getElementById("uppercase");
const lowercaseEl = document.getElementById("lowercase");
const numbersEl = document.getElementById("numbers");
const symbolsEl = document.getElementById("symbols");
const generateEl = document.getElementById("generate");

generateEl.addEventListener("click", () => {
  const length = +lengthEl.value; // 获取密码长度
  const hasLower = lowercaseEl.checked; // 获取包含小写是否选中
  const hasUpper = uppercaseEl.checked; // 获取包含大写是否选中
  const hasNumber = numbersEl.checked; // 获取包含数字是否选择
  const hasSymbol = symbolsEl.checked; // 获取包含特殊字母是否选中
  // 将随机生成的密码显示到 input 框中
  resultEl.value =
    generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length) ?? "";
});

/**
 * @function_name generatePassword ->生成密码的函数
 * @param {*} lower 是否小写
 * @param {*} upper 是否大写
 * @param {*} number 是否是数字
 * @param {*} symbol 是否是特殊符号
 * @param {*} length 密码长度
 * @return {*} string
 */
function generatePassword(lower, upper, number, symbol, length) {
  //TODO：待补充代码
  if(length < 4 || length > 20) return ''
  let str = ''
  let smallWord = 'abcdefghijklmnopqrstuvwxyz'
  let bigWord = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
  let teshu = '!@#$%^&*(){}[]=<>/,.'
  for(let i = 0; i < length; i++) {
    if(str.length == length) break
    if(lower && str.length < length) str += smallWord[Math.floor(Math.random() * 26)]
    if(upper && str.length < length) str += bigWord[Math.floor(Math.random() * 26)]
    if(number && str.length < length) str += Math.floor(Math.random() * 10)
    if(symbol && str.length < length) str += teshu[Math.floor(Math.random() * str.length)]
  }
  return str
}

代码解析📑

一、HTML 部分

//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>不能说的秘密</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="frame">
        <div class="nav">
          <ul>
            <li><a class="btn">密码生成器</a></li>
          </ul>
        </div>
        <div class="form-signin">
          <label for="username">生成的密码</label>
          <input
            id="result"
            class="form-styling"
            type="text"
            name="username"
            disabled
            placeholder=""
          />
          <div class="settings">
            <div class="setting">
              <label>密码长度</label>
              <input
                type="number"
                id="passwordLength"
                min="4"
                max="20"
                value="20"
              />
            </div>
            <div class="setting">
              <label>包含大写字母</label>
              <input type="checkbox" value="uppercase" id="uppercase" />
            </div>
            <div class="setting">
              <label>包含小写字母</label>
              <input value="lowercase" type="checkbox" id="lowercase" />
            </div>
            <div class="setting">
              <label>包含数字</label>
              <input value="numbers" type="checkbox" id="numbers" />
            </div>
            <div class="setting">
              <label>包含特殊符号</label>
              <input value="symbols" type="checkbox" id="symbols" />
            </div>
          </div>
          <div class="btn-animate" id="generate">生成密码</div>
        </div>
      </div>
    </div>
    <script src="./js/generatePassword.js"></script>
  </body>
</html>

功能概述

这段 HTML 代码构建了一个简单的用户界面，用于实现随机密码生成器的交互部分。用户可以通过该界面设置密码的长度和包含的字符类型，然后点击按钮生成密码。

详细解释

头部信息：
- <!DOCTYPE html>：声明文档类型为 HTML5。
- <meta charset="UTF-8" />：设置字符编码为 UTF - 8。
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />：指定页面在 Internet Explorer 中以最新的渲染模式显示。
- <title>不能说的秘密</title>：设置网页标题。
- <link rel="stylesheet" href="./css/style.css" />：引入外部 CSS 文件，用于页面样式的设置。
主体内容：
- <div class="container"> 和 <div class="frame">：用于包裹整个页面内容，并进行布局。
- <div class="nav">：导航栏部分，显示 “密码生成器” 标题。
- <div class="form-signin">：包含密码生成的表单元素。
  - <label for="username">生成的密码</label> 和 <input id="result" ... disabled>：显示生成的密码，disabled 属性使其不可编辑。
  - <div class="settings">：包含密码生成的设置选项。
    - 密码长度输入框 <input type="number" id="passwordLength" min="4" max="20" value="20" />：用户可以输入 4 到 20 之间的数字作为密码长度，默认值为 20。
    - 四个复选框，分别用于选择是否包含大写字母、小写字母、数字和特殊符号。
  - <div class="btn-animate" id="generate">生成密码</div>：点击该按钮触发密码生成操作。
脚本引入：
- <script src="./js/generatePassword.js"></script>：引入外部 JavaScript 文件，实现密码生成的逻辑。

二、CSS 部分

/*style.css*/
html,
body * {
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

.container {
  width: 100%;
  padding-top: 60px;
  padding-bottom: 100px;
}

.frame {
  height: 575px;
  width: 430px;
  background: linear-gradient(rgba(35, 43, 85, 0.75), rgba(35, 43, 85, 0.95));
  margin-left: auto;
  margin-right: auto;
  border-top: solid 1px rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: all 0.5s ease;
}

.nav {
  width: 100%;
  height: 100px;
  padding-top: 40px;
  opacity: 1;
  transition: all 0.5s ease;
}

li {
  padding-left: 10px;
  font-size: 18px;
  display: inline;
  text-align: left;
  text-transform: uppercase;
  padding-right: 10px;
  color: #ffffff;
}

.form-signin {
  width: 430px;
  height: 375px;
  font-size: 16px;
  font-weight: 300;
  padding-left: 37px;
  padding-right: 37px;
  padding-top: 55px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.form-styling {
  width: 100%;
  height: 35px;
  padding-left: 15px;
  border: none;
  border-radius: 20px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.2);
}

label {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 13px;
  padding-left: 15px;
  padding-bottom: 10px;
  color: rgba(255, 255, 255, 0.7);
  display: block;
}

:focus {
  outline: none;
}

.btn-signin {
  float: left;
  padding-top: 8px;
  width: 100%;
  height: 35px;
  border: none;
  border-radius: 20px;
  margin-top: -8px;
}

.btn-animate {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  width: 100%;
  height: 35px;
  line-height: 35px;
  border: none;
  border-radius: 20px;
  margin-top: 23px;
  background-color: rgba(16, 89, 255, 1);
}
.setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

功能概述

这段 CSS 代码为 HTML 页面提供了样式，使页面具有美观的布局和视觉效果。

详细解释

全局样式：
- box-sizing: border-box;：设置所有元素的盒模型为 border-box，方便进行尺寸计算。
- font-family: "Open Sans", sans-serif;：设置全局字体为 "Open Sans" 无衬线字体。
容器样式：
- .container：设置容器的宽度为 100%，并添加上下内边距。
- .frame：设置主要内容区域的高度、宽度、背景渐变、边框、圆角、阴影等样式。
导航栏样式：
- .nav：设置导航栏的宽度、高度、内边距和透明度，并添加过渡效果。
- li：设置导航栏列表项的样式，包括内边距、字体大小、显示方式、文本转换和颜色。
表单样式：
- .form-signin：设置表单的宽度、高度、字体大小、字体重量和内边距，并添加过渡效果。
- .form-styling：设置输入框的样式，包括宽度、高度、内边距、边框、圆角和背景颜色。
- label：设置标签的样式，包括字体重量、文本转换、字体大小、内边距和颜色。
- :focus：去除输入框获得焦点时的默认轮廓线。
按钮样式：
- .btn-signin：设置按钮的浮动、内边距、宽度、高度、边框、圆角和外边距。
- .btn-animate：设置 “生成密码” 按钮的样式，包括字体重量、文本转换、字体大小、文本对齐、颜色、宽度、高度、行高、边框、圆角、外边距和背景颜色。
设置项样式：
- .setting：使用 Flexbox 布局，使设置项中的标签和输入框水平分布，并居中对齐，同时添加上下外边距。

三、JavaScript 部分

//generatePassword.js
const resultEl = document.getElementById("result");
const lengthEl = document.getElementById("passwordLength");
const uppercaseEl = document.getElementById("uppercase");
const lowercaseEl = document.getElementById("lowercase");
const numbersEl = document.getElementById("numbers");
const symbolsEl = document.getElementById("symbols");
const generateEl = document.getElementById("generate");

generateEl.addEventListener("click", () => {
  const length = +lengthEl.value; // 获取密码长度
  const hasLower = lowercaseEl.checked; // 获取包含小写是否选中
  const hasUpper = uppercaseEl.checked; // 获取包含大写是否选中
  const hasNumber = numbersEl.checked; // 获取包含数字是否选择
  const hasSymbol = symbolsEl.checked; // 获取包含特殊字母是否选中
  // 将随机生成的密码显示到 input 框中
  resultEl.value =
    generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length) ?? "";
});

/**
 * @function_name generatePassword ->生成密码的函数
 * @param {*} lower 是否小写
 * @param {*} upper 是否大写
 * @param {*} number 是否是数字
 * @param {*} symbol 是否是特殊符号
 * @param {*} length 密码长度
 * @return {*} string
 */
function generatePassword(lower, upper, number, symbol, length) {
  //TODO：待补充代码
  if(length < 4 || length > 20) return ''
  let str = ''
  let smallWord = 'abcdefghijklmnopqrstuvwxyz'
  let bigWord = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
  let teshu = '!@#$%^&*(){}[]=<>/,.'
  for(let i = 0; i < length; i++) {
    if(str.length == length) break
    if(lower && str.length < length) str += smallWord[Math.floor(Math.random() * 26)]
    if(upper && str.length < length) str += bigWord[Math.floor(Math.random() * 26)]
    if(number && str.length < length) str += Math.floor(Math.random() * 10)
    if(symbol && str.length < length) str += teshu[Math.floor(Math.random() * str.length)]
  }
  return str
}

功能概述

这段 JavaScript 代码实现了随机密码生成的逻辑，通过监听 “生成密码” 按钮的点击事件，根据用户设置的密码长度和字符类型生成随机密码，并将其显示在输入框中。

详细解释

元素获取：
- 使用 document.getElementById 方法获取 HTML 元素，包括密码显示框、密码长度输入框、复选框和生成按钮。
事件监听：
- 使用 addEventListener 方法为 “生成密码” 按钮添加点击事件监听器。
- 在事件处理函数中，获取用户设置的密码长度和字符类型。
- 调用 generatePassword 函数生成随机密码，并将结果显示在密码显示框中。
密码生成函数：
- generatePassword 函数接受四个布尔值参数（lower、upper、number、symbol）和一个整数参数（length），分别表示是否包含小写字母、大写字母、数字、特殊符号以及密码长度。
- 首先检查密码长度是否在 4 到 20 之间，如果不在则返回空字符串。
- 定义包含小写字母、大写字母和特殊符号的字符串。
- 使用 for 循环生成密码，在每次循环中，根据用户选择的字符类型随机添加字符到密码字符串中，直到密码长度达到指定值。
- 最后返回生成的密码字符串。