密码生成器(HTML+CSS+JavaScript)

🌏个人博客主页:心.c

前言:前两天写了密码生成器,现在跟大家分享一下,大家如果想使用随便拿,如果哪里有问题还请大佬们给我指出,感谢支持

🔥🔥🔥专题文章密码生成器

😽感谢大家的点赞👍收藏⭐️评论✍您的一键三连是我更新的动力💓

目录

作品展示:

功能介绍:

核心:

所用字符显示:

上下按钮点击事件:

单选按钮点击事件:

更新遍历:

随机数的生成:

密码的复制:

代码展示(源代码):

HTML:

CSS:

JavaScript:


作品展示:

功能介绍:

核心:

numArr是我创建的一个用了储存状态的数组,用来设定按钮绑定,'1'就是绑定的numberArr,'2'就是绑定的smallArr,'3'绑定的就是bigArr,'4'就是绑定的middleArr,初始化为'1'是因为第一个单选按钮是默认已经被点击的,因为开始给第一个radiobox设置了clicked被点击事件,所以开始把'1'添加上,如果后面监听radiobox时被点击了,我们只需要通过遍历numArr就可以更改totalArr,显示内容和修改密码了

javascript 复制代码
  let numArr = ['1']
所用字符显示:

下面是四个数组,分别是数字,大写字母,小写字母,和常用符号,主要是用于将这些字符显示在总的totalArr数组里面,所用字符就是totalArr数组里面的内容**,**所用字符内容可以通过下方的所含字符进行修改

javascript 复制代码
//生成四个数组
  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变量是我的全局变量,用来检测生成密码的长度

javascript 复制代码
 //获得两个小图标的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内容时一直保持数字在前,然后是小写字母,大学字母,字符,不会因为先点击谁而改变顺序(谁下标小先显示谁)

javascript 复制代码
  //获得单选按钮
  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

javascript 复制代码
  // 通过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)

javascript 复制代码
 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里面的字体不能复制,所以我就添加了一个复制功能,下面是实现复制的代码

javascript 复制代码
  // 选择所有.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:
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:
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:
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);
    });
  });


})

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

相关推荐
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁2 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂2 小时前
工程化实战内功修炼测试题
前端·javascript
毋若成5 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽5 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新6 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
Dread_lxy7 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
榴莲千丞8 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-8 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与8 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts