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

心.c

于 2024-08-23 20:14:38 发布

阅读量489

点赞数 37

文章标签： html css javascript

本文链接：https://blog.csdn.net/2301_81253185/article/details/141468996

版权

🌏个人博客主页：心.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">&#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为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);
    });
  });


})

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

心.c

关注

37
点赞
踩
13

收藏

觉得还不错? 一键收藏
12
评论
密码生成器（HTML+CSS+JavaScript）

🌏个人博客主页：心.c🔥🔥🔥专题文章：密码生成器😽感谢大家的点赞👍收藏⭐️评论✍您的一键三连是我更新的动力 💓 目录作品展示：功能介绍：核心：所用字符显示：上下按钮点击事件：单选按钮点击事件：更新遍历：随机数的生成：密码的复制：代码展示（源代码）：HTML：CSS：JavaScript：所用字符显示：上下按钮点击事件：单选按钮点击事件：更新遍历：随机数的生成：密码的复制：
复制链接

扫一扫