🌏个人博客主页:心.c
前言:前两天写了密码生成器,现在跟大家分享一下,大家如果想使用随便拿,如果哪里有问题还请大佬们给我指出,感谢支持
🔥🔥🔥专题文章:密码生成器
😽感谢大家的点赞👍收藏⭐️评论✍您的一键三连是我更新的动力 💓
目录
作品展示:
功能介绍:
核心:
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);
});
});
})
到这里就分享完成了,感谢大家的观看 ! ! !