🌏个人博客主页：心.c
前言：前两天写了密码生成器，现在跟大家分享一下，大家如果想使用随便拿，如果哪里有问题还请大佬们给我指出，感谢支持
🔥🔥🔥专题文章：密码生成器
😽感谢大家的点赞👍收藏⭐️评论✍您的一键三连是我更新的动力 💓
目录
作品展示：
功能介绍：
核心：
所用字符显示：
上下按钮点击事件：
单选按钮点击事件：
更新遍历：
随机数的生成：
密码的复制：
代码展示（源代码）：
HTML：
CSS：
JavaScript：
作品展示：
功能介绍：
核心：
numArr是我创建的一个用了储存状态的数组，用来设定按钮绑定，‘1’就是绑定的numberArr,'2'就是绑定的smallArr，‘3’绑定的就是bigArr，‘4’就是绑定的middleArr,初始化为‘1’是因为第一个单选按钮是默认已经被点击的，因为开始给第一个radiobox设置了clicked被点击事件，所以开始把‘1’添加上，如果后面监听radiobox时被点击了，我们只需要通过遍历numArr就可以更改totalArr,显示内容和修改密码了
let numArr = ['1']所用字符显示：
下面是四个数组，分别是数字，大写字母，小写字母，和常用符号，主要是用于将这些字符显示在总的totalArr数组里面，所用字符就是totalArr数组里面的内容，所用字符内容可以通过下方的所含字符进行修改
//生成四个数组
let numberArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
let smallArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
let bigArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
let middleArr = ['~', '!', '@', '#', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+']
let totalArr = []上下按钮点击事件：
下方是我的图标点击改变密码长度事件，密码长度限制在6-20之间，当超出范围时，会有提示，num变量是我的全局变量，用来检测生成密码的长度
//获得两个小图标的dom元素
let top = this.document.querySelector('.icon_top')
let bottom = this.document.querySelector('.icon_bottom')
//给向上箭头添加事件监听
top.addEventListener('click', function () {
if (num >= 6 && num <= 19) {
num++
number.innerHTML = num
} else {
alert('数字已达上限')
}
})
//给向下箭头添加事件监听
bottom.addEventListener('click', function () {
if (num >= 7 && num <= 20) {
num--
number.innerHTML = num
} else {
alert('数字已达下限')
}
})
单选按钮点击事件：
点击按钮时会对checkbox进行监听，我的4个小按钮都是有一个class checkbox类名，当点击时获得它的data-id 为几，把id添加到我的numArr数组里面或者从中删除（判断是否删除还是进行添加就判断它是否被点击过），‘1’就是绑定的numberArr,'2'就是绑定的smallArr，‘3’绑定的就是bigArr，‘4’就是绑定的middleArr
举例：（如果点击第二个checkbox，如果判断它没有被点击，那么将它的id=2添加到我的numArr当中，这样后面我可以通过遍历我的numArr来改变我的totalArr）
sort排序是为了显示totalArr内容时一直保持数字在前，然后是小写字母，大学字母，字符，不会因为先点击谁而改变顺序（谁下标小先显示谁）
//获得单选按钮
let check = this.document.querySelector('.checkbox')
//给父级check添加冒泡事件监听
check.addEventListener('click', function (e) {
if (e.target.tagName === 'INPUT') {
let id = e.target.dataset.id
if (e.target.checked) {
//添加numArr元素
numArr.push(id)
numArr = numArr.sort()
render()
} else {
const index = numArr.indexOf(id);
if (index !== -1) {
//删除numArr元素
numArr.splice(index, 1);
}
render()
}
text.innerHTML = totalArr.join('');
}
})
更新遍历：
通过遍历numArr里面的内容来修改我的totalArr
// 通过numArr更新totalArr数组
function render() {
totalArr = []; // 清空 totalArr
for (let i = 0; i < numArr.length; i++) {
let id = numArr[i];
switch (id) {
case '1':
totalArr = totalArr.concat(numberArr);
break;
case '2':
totalArr = totalArr.concat(smallArr);
break;
case '3':
totalArr = totalArr.concat(bigArr);
break;
case '4':
totalArr = totalArr.concat(middleArr);
break;
}
}
}
随机数的生成：
将遍历totalArr的数组随机显示num长度的密码，并将其显示到页面当中（如果按钮哪个也不选，就返回-1）
let btn = document.querySelector('.btn')
//给按钮添加事件监听，将内容进行添加
btn.addEventListener('click', function () {
for (let i = 0; i < 6; i++) {
let box_text = document.querySelector(`.content [data-id="${i + 1}"] .text`);
box_text.innerHTML = getRandom()
}
})
//根据num和totalArr生成随机数
function getRandom() {
let result = '';
if (!totalArr) {
for (let i = 0; i < num; i++) {
// 生成一个介于 0 和 totalArr.length-1 之间的随机索引
let index = Math.floor(Math.random() * totalArr.length);
result += totalArr[index];
}
return result
} else {
return -1
}
}
密码的复制：
因为div里面的字体不能复制，所以我就添加了一个复制功能，下面是实现复制的代码
// 选择所有.copy
const copyButtons = this.document.querySelectorAll('.copy');
//添加点击事件监听器
copyButtons.forEach(function (copy) {
copy.addEventListener('click', function () {
// 获取对应的 .text 元素
let textElement = copy.previousElementSibling;
// 创建一个隐藏的可编辑区域
const textarea = document.createElement('textarea');
textarea.value = textElement.textContent.trim();
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
// 选择文本
textarea.select();
// 执行复制命令
try {
if (textarea.value === '') {
alert('内容为空不可复制')
} else {
document.execCommand('copy');
alert("内容已复制到剪贴板!");
}
} catch (err) {
console.error('无法复制文本: ', err);
}
// 清理
document.body.removeChild(textarea);
});
});代码展示（源代码）：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./password.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
<div class="entire wrapper">
<!-- 标题 -->
<div class="title">
<h2>随机密码生成器</h2>
</div>
<!-- 密码长度显示框 -->
<div class="password_length">
<span><strong>密码长度：</strong></span>
<div class="text"></div>
<div class="icon">
<i class="iconfont icon_top"></i>
<i class="iconfont icon_bottom"></i>
</div>
</div>
<!-- 所用字母显示 -->
<div class="word_show">
<span><strong>所用字符：</strong></span>
<div class="text"></div>
</div>
<!-- 所含字符 -->
<div class="word_select">
<span class="char"><strong>所含字符：</strong></span>
<div class="checkbox">
<div class="number"><input type="checkbox" checked name="number" data-id="1"><span>数字0-9</span></div>
<div class="small"><input type="checkbox" name="small" data-id="2"><span>小写字母a-z</span></div>
<div class="big"><input type="checkbox" name="big" data-id="3"><span>大写字母A-Z</span></div>
<div class="middle"><input type="checkbox" name="middle" data-id="4"><span>常用符号~!@#$%^&*()_+</span></div>
</div>
</div>
<!-- 生成密码 -->
<button class="btn"><strong>生成密码</strong></button>
<hr>
<!-- 生成结果 -->
<div class="result">
<span><strong>生成结果</strong></span>
<div class="content">
<div data-id="1" class="box">
<div class="text"></div>
<div class="copy">复制</div>
</div>
<div data-id="2" class="box">
<div class="text"></div>
<div class="copy">复制</div>
</div>
<div data-id="3" class="box">
<div class="text"></div>
<div class="copy">复制</div>
</div>
<div data-id="4" class="box">
<div class="text"></div>
<div class="copy">复制</div>
</div>
<div data-id="5" class="box">
<div class="text"></div>
<div class="copy">复制</div>
</div>
<div data-id="6" class="box">
<div class="text"></div>
<div class="copy">复制</div>
</div>
</div>
</div>
</div>
<script src="./password.js"></script>
</body>
</html>CSS：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
user-select: none;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.wrapper {
margin: auto;
}
.entire {
margin-top: 30px;
height: 580px;
width: 1000px;
background-color: #f2fffc;
padding: 30px;
border-radius: 30px;
border: 1px solid rgb(38, 118, 68);
}
.title {
width: 200px;
height: 40px;
margin-bottom: 20px;
}
.title h2 {
color: #78a878;
}
.password_length {
display: flex;
align-items: center;
height: 30px;
width: 400px;
margin-bottom: 20px;
}
.password_length span {
/* padding-top: 10px; */
width: 80px;
}
.password_length .text {
font-size: 14px;
padding: 4px;
height: 25px;
width: 300px;
border: 1px solid rgb(156, 156, 156);
background-color: #ffffff;
}
.password_length .icon {
text-align: center;
vertical-align: middle;
width: 20px;
height: 25.25px;
border: #afafaf 1px solid;
border-left: none;
}
.icon i {
display: block;
color: #757575;
font-size: 8px;
}
.icon .icon_top,
.icon .icon_bottom {
width: 20px;
height: 11.8px;
}
.icon .icon_top:hover,
.icon .icon_bottom:hover {
background-color: #67938d;
color: #ffffff;
}
.icon .icon_top {
border-bottom: 1px solid rgb(135, 135, 135);
}
.word_show {
display: flex;
align-items: center;
height: 30px;
width: 800px;
margin-bottom: 20px;
/* background-color: #b0a0a0; */
}
.word_show span {
/* padding-top: 10px; */
width: 80px;
}
.word_show .text {
padding: 3px;
align-items: center;
font-size: 13px;
width: 720px;
height: 25px;
background-color: #fff;
border: 1px solid rgb(158, 158, 158);
}
.word_select {
display: flex;
align-items: center;
height: 30px;
width: 800px;
margin-bottom: 20px;
/* background-color: #bbbbbb; */
}
.word_select .char {
/* padding-top: 10px; */
width: 80px;
}
.word_select .checkbox {
line-height: 30px;
font-size: 13px;
color: #797979;
display: flex;
width: 720px;
justify-content: space-between;
}
.checkbox input {
width: 16px;
height: 16px;
margin-right: 3px;
margin-top: 9px;
}
.checkbox span {
display: block;
margin-top: 2px;
}
.checkbox .number,
.checkbox .small,
.checkbox .big,
.checkbox .middle {
display: flex;
height: 30px;
}
.btn {
width: 100px;
height: 30px;
background-color: #579081;
border: none;
border-radius: 2px;
color: #ffffff;
margin-bottom: 20px;
}
.result {
width: 940px;
height: 260px;
/* background-color: #e0e0e0; */
margin-bottom: 20px;
}
hr {
margin-bottom: 25px;
}
.result .content {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.content .box {
margin-bottom: 25px;
display: flex;
border: 1px solid rgb(136, 136, 136);
background-color: #f2fffc;
width: 300px;
height: 45px;
align-items: center;
}
.content .box .text {
font-size: 16px;
color: #636363;
width: 250px;
padding: 12px;
}
.content .box .copy {
width: 50px;
text-align: center;
border-left: 1px solid rgb(98, 98, 98);
cursor: pointer;
}JavaScript：
window.addEventListener('load', function () {
//生成四个数组
let numberArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
let smallArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
let bigArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
let middleArr = ['~', '!', '@', '#', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+']
//checked默认
let numArr = ['1']
//初始化num为6
let num = 6;
let number = this.document.querySelector('.password_length .text')
number.innerHTML = num
//将numberArr初始化到totalArr进行显示
let totalArr = []
totalArr = totalArr.concat(numberArr)
let text = this.document.querySelector('.word_show .text')
text.innerHTML = totalArr.join('');
//获得两个小图标的dom元素
let top = this.document.querySelector('.icon_top')
let bottom = this.document.querySelector('.icon_bottom')
//给向上箭头添加事件监听
top.addEventListener('click', function () {
if (num >= 6 && num <= 19) {
num++
number.innerHTML = num
} else {
alert('数字已达上限')
}
})
//给向下箭头添加事件监听
bottom.addEventListener('click', function () {
if (num >= 7 && num <= 20) {
num--
number.innerHTML = num
} else {
alert('数字已达下限')
}
})
//获得单选按钮
let check = this.document.querySelector('.checkbox')
//给父级check添加冒泡事件监听
check.addEventListener('click', function (e) {
if (e.target.tagName === 'INPUT') {
let id = e.target.dataset.id
if (e.target.checked) {
//添加numArr元素
numArr.push(id)
numArr = numArr.sort()
render()
} else {
const index = numArr.indexOf(id);
if (index !== -1) {
//删除numArr元素
numArr.splice(index, 1);
}
render()
}
text.innerHTML = totalArr.join('');
}
})
// 通过numArr更新totalArr数组
function render() {
totalArr = []; // 清空 totalArr
for (let i = 0; i < numArr.length; i++) {
let id = numArr[i];
switch (id) {
case '1':
totalArr = totalArr.concat(numberArr);
break;
case '2':
totalArr = totalArr.concat(smallArr);
break;
case '3':
totalArr = totalArr.concat(bigArr);
break;
case '4':
totalArr = totalArr.concat(middleArr);
break;
}
}
}
let btn = document.querySelector('.btn')
//给按钮添加事件监听，将内容进行添加
btn.addEventListener('click', function () {
for (let i = 0; i < 6; i++) {
let box_text = document.querySelector(`.content [data-id="${i + 1}"] .text`);
box_text.innerHTML = getRandom()
}
})
//根据num和totalArr生成随机数
function getRandom() {
let result = '';
if (!totalArr) {
for (let i = 0; i < num; i++) {
// 生成一个介于 0 和 totalArr.length-1 之间的随机索引
let index = Math.floor(Math.random() * totalArr.length);
result += totalArr[index];
}
return result
} else {
return -1
}
}
// 选择所有.copy
const copyButtons = this.document.querySelectorAll('.copy');
//添加点击事件监听器
copyButtons.forEach(function (copy) {
copy.addEventListener('click', function () {
// 获取对应的 .text 元素
let textElement = copy.previousElementSibling;
// 创建一个隐藏的可编辑区域
const textarea = document.createElement('textarea');
textarea.value = textElement.textContent.trim();
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
// 选择文本
textarea.select();
// 执行复制命令
try {
if (textarea.value === '') {
alert('内容为空不可复制')
} else {
document.execCommand('copy');
alert("内容已复制到剪贴板!");
}
} catch (err) {
console.error('无法复制文本: ', err);
}
// 清理
document.body.removeChild(textarea);
});
});
})到这里就分享完成了，感谢大家的观看 ! ! !
![[Linux] 认识系统服务（daemon）](https://i-blog.csdnimg.cn/direct/5153012c63f749cb9215ce76ff1f2048.png)
