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

admin2024-08-25  13

密码生成器(HTML+CSS+JavaScript),第1张

  🌏个人博客主页:心.c

密码生成器(HTML+CSS+JavaScript),第2张

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

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

目录

作品展示: 

 功能介绍:

 核心: 

 所用字符显示:

上下按钮点击事件:

单选按钮点击事件:

 更新遍历:

 随机数的生成:

 密码的复制:

代码展示(源代码):

HTML:

CSS:

JavaScript:


作品展示: 

密码生成器(HTML+CSS+JavaScript),第3张

 功能介绍:

 核心: 
  let numArr = ['1']
 所用字符显示:
//生成四个数组
  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 = []
上下按钮点击事件:
 //获得两个小图标的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);
    });
  });

代码展示(源代码):

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);
    });
  });


})

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!