一、介绍
密码生成器是一个实用的随机密码生成软件，有了它，你就不用绞尽脑汁想复杂的密码来守护你的个人隐私，只要动一下手指，一个新的密码就会生成。
如此好用的工具，下面就让我们亲自动手来制作一个吧～
二、目标
请完善 generatePassword.js 中的 generatePassword 函数，实现根据规则随机生成密码的功能。密码长度已由 input 框（id=passwordLength）的属性进行了限制最小 4，最大 20。
- 生成的密码必须包含已选中的选项且只能由已选中的选项组成。
- 特殊符号如下：!@#$%^&*(){}[]=<>/,.
- 本题封装方法时只需要考虑长度符合要求（ 4-20 ）且有已选中条件的情况，其他情况无需处理。
完成后，最终页面效果如下：
三、代码
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>
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;
}
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：待补充代码
}
四、答案
function generatePassword(lower, upper, number, symbol, length) {
//TODO：待补充代码
//26个小写字母
const lowerCase = 'abcdefghijklmnopqrstuvwxyz'
//26个大写字母
const upperCase = lowerCase.toUpperCase()
//特殊字符
const specialCase = '!@#$%^&*(){}[]=<>/,.'
//封装获取随机数字 长度为0-length
function getRandom(max) {
let random = Math.random() //[0,1)
random = random * max //[0,max)
random = Math.round(random) //[0,max]
return random
}
//定义密码
let str = ''
//记录已经生成的密码长度
while (str.length < length) {
//包含小写
if (lower) {
str += lowerCase.charAt(getRandom(lowerCase.length))
if (str.length >= length) {
break
}
}
//包含大写
if (upper) {
str += upperCase.charAt(getRandom(upperCase.length))
if (str.length >= length) {
break
}
}
//包含数字
if (number) {
str += getRandom(9)
if (str.length >= length) {
break
}
}
//包含特殊字符
if (symbol) {
str += specialCase.charAt(getRandom(specialCase.length))
if (str.length >= length) {
break
}
}
}
//循环走出来说明密码已经生成
return str
}