当前位置：首页 > news >正文

密码生成器（HTML+CSS+JavaScript）

news 来源：原创 2024/9/18 17:39:15

🌏个人博客主页：心.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.idif (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 = [];  // 清空 totalArrfor (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里面的字体不能复制，所以我就添加了一个复制功能，下面是实现复制的代码

// 选择所有.copyconst 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">&#xe685;</i><i class="iconfont icon_bottom">&#xe686;</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为6let 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.idif (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 = [];  // 清空 totalArrfor (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}}// 选择所有.copyconst 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);});});})

到这里就分享完成了，感谢大家的观看 ! ! !