创建 JavaScript 密码生成器（免费代码）

最新推荐文章于 2024-11-14 22:52:12 发布

原创最新推荐文章于 2024-11-14 22:52:12 发布 · 465 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #密码框

本文介绍如何创建一个JavaScript密码生成器，用户可以选择密码长度和包含的字符类型，如小写字母、大写字母、数字和符号。通过HTML、CSS和JavaScript代码实现，允许用户自定义和生成安全密码。

JavaScript 密码生成器将帮助您创建您选择的密码。之前我向您展示了如何创建JavaScript 随机密码生成器。但是，此设计将为您提供手动创建密码的选项。

这个简单的密码生成器将帮助您创建您想要的密码。有不同的选项和控件。这将允许您创建所需的密码。

创建一个 HTML 文件并添加以下结构：

<div id="password-generator">

      <input value="Password generator" id="password-output">

      <div class="range">
        <input type="range" min="4" max="24" step="1" value="8" id="password-length"
          oninput="document.getElementById('display-password-length').value=this.value">

        <input type="text" value="8" maxlength="2" id="display-password-length"
          oninput="document.getElementById('password-length').value=this.value">
      </div>

      <div class="flex">
        <input type="checkbox" id="lowercase" checked="checked">
        <label for="lowercase">a-z</label>

        <input type="checkbox" id="uppercase">
        <label for="uppercase">A-Z</label>

        <input type="checkbox" id="numbers">
        <label for="numbers">0-9</label>

        <input type="checkbox" id="symbols">
        <label for="symbols">!-?</label>
      </div>

      <button id="generateButton" type="button" onclick="generatePassword()">Generate</button>

    </div>

添加以下 CSS 来设置步进栏的样式：

@import url("https://fonts.googleapis.com/css?family=Cuprum&display=swap");
* {
  box-sizing: border-box;
  font-family: sans-serif;
}

input {
  border: none;
  background: transparent;
  outline: none;
}

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  text-align: center;
  height: 100vh;
  background: #0976d5;
}
body #password-generator {
  padding: 2rem;
  margin: 0 auto;
  width: 500px;
  border-radius: 3px;
  box-shadow: 0 0 2px #1f1f1f;
  border: 3px solid #d5d4ff;
  position: relative;
  background: white;
  white-space: nowrap;
}
body #password-generator #password-output {
  text-align: center;
  font-size: 2rem;
  margin: 0 auto 1.2rem;
  width: 100%;
  color: rgb(2, 91, 164);
  padding: 5px;
  box-shadow: 0 0 20px rgba(0,139,253,0.45);
}
body #password-generator .range {
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 60px;
  max-width: 70%;
  margin-left: 15%;
  padding: .4rem 1rem .8rem 2.5rem;
  border: 1.5px solid rgb(8, 84, 181);
}
body #password-generator .range input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 40%;
  max-width: 100%;
  height: 15px;
  padding: 0px;
  background: #7a7a82;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  box-shadow: 0 2px 35px rgba(0, 0, 0, 0.4555);
  border-radius: 10px;
  cursor: pointer;
  scroll-behavior: smooth;
  z-index: 1;
}
body #password-generator .range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: rgb(9, 71, 222);
  cursor: pointer;
  border-radius: 18px;
  transition: 0.5s ease;
}

body #password-generator .range #display-password-length {
  text-align: center;
  font-size: 1.4rem;
  width: 80px;
  padding-top: 10px;
}
body #password-generator .flex {
  margin: 1rem 1rem 2rem;
  display: flex;
  justify-content: space-between;
}
body #password-generator .flex input {
  display: none;
}
body #password-generator .flex input:checked + label {

  border: 2px solid rgb(205, 151, 12);
  background: rgb(173, 144, 82);
  filter: brightness(120%);
  transform: scale(1.1);
}
body #password-generator .flex label {
  border: 2px solid #0571bb;
  border-radius: 4px;
  padding: 0.6rem;
  cursor: pointer;
  font-size: 1.3rem;
  text-align: center;
  display: block;
  width: 80px;
  transition: 0.2s ease;
}

body #password-generator button {
  outline: none;
  background: #0f6cc3;
  color: white;
  border: none;
  padding: 1rem 2rem;
  margin: 0.5rem 0;
  border-radius: 3px;
  box-shadow: 1px 1px 6px 1px #8f8a8a;
  text-transform: uppercase;
  font-size: 1.2rem;
  transition: 0.2s ease;
  cursor: pointer;
}
body #password-generator button:hover {
   background: rgb(173, 118, 22);
}

添加 JavaScript 代码来控制步进栏行为：

 const passwordOutput =  document.getElementById('password-output');
  const dataLowercase = "azertyuiopqsdfghjklmwxcvbn".split('');
  const dataUppercase = "AZERTYUIOPQSDFGHJKLMWXCVBN".split('');
  const dataNumbers = "0123456789".split('');
  const dataSymbols = "!@#$%^&*-_=+\|:;',.>/?~".split('');

  function generatePassword() {

    const data = [].concat(
      lowercase.checked ? dataLowercase : [],
      uppercase.checked ? dataUppercase : [],
      numbers.checked ? dataNumbers : [],
      symbols.checked ? dataSymbols : []
    );

    let passwordLength = parseInt(document.getElementById('display-password-length').value);
    let newPassword = '';

    if (data.length === 0) {
      passwordOutput.innerHTML = "Générateur de MDP";
      alert('Please check at least one criteria');
      return;
    }

    for (let i = 0; i < passwordLength; i++) {
      newPassword += data[Math.floor(Math.random() * data.length)];
    }
    passwordOutput.value = newPassword;

    passwordOutput.select();
    document.execCommand('copy');
    generateButton.innerHTML = "Copied !";
    setTimeout(() => {generateButton.innerHTML = "Generator Again"}, 3500);

  }

希望通过上面的代码，您已经了解了如何使用 JavaScript 创建此密码生成器。早些时候我分享了一个关于随机密码生成器的教程。

如果您想创建一个简单的密码生成器，那么您可以按照该教程进行操作。下面是一个允许您下载源代码的按钮。如果有任何问题，您可以通过评论让我知道。