使用 Javascript 的随机密码生成器

在本文中，我将向您展示如何借助 JavaScript 代码创建随机密码生成器。我已经创建过许多类型的 JavaScript 项目，但这是我第一次创建这样的系统。如果您想自己动手，希望本文能够对您有所帮助。

随机密码生成器是一个 JavaScript 项目，可以自动生成强且唯一的密码。我在每个人的第一个网页上都创建了一个输入框。我使用了标题。标题下方是一个输入框，可以在其中生成密码。

然后我做了两个按钮来复制和生成密码。每次点击“生成”按钮时，都会生成单元密码。为此，我使用了 JavaScriptMath.random和Math.floor方法。还有一个复制按钮可以帮助你复制源代码。

如果你不明白我的意思，那么你绝对可以看看下面的视频教程。这个视频能让你完全理解我是如何完成这个设计的。

希望上面的视频教程能帮助您了解如何创建这个（随机密码生成器）。
下面我将逐步演示我使用的代码以及它们的用途。
首先，您需要创建一个 HTML 和 CSS 文件。

步骤 1：使用 html 代码创建一个框

我使用以下代码在网页中创建了一个框。网页的背景色为purple，框的背景色为白色。



<div class="box">

</div>



* {
 margin: 0;
 padding: 0;
 user-select: none;
 box-sizing: border-box;
  }

body {
  background-color: #8d0cf7;
  justify-content: center;
  align-items: center;
  display: flex;
  min-height: 100vh;
    }

 .box{
   background-color: white;
   padding-top: 30px;
   padding: 30px;

 }

第 2 步：向该框添加标题

如上所示，我在这里第一次使用了标题。以下 HTML 和 CSS 代码有助于创建和设计该标题。



<h2>Random Password Generater</h2>



 .box h2{
   margin-bottom: 40px;
   text-align: center;
   font-size: 26px;
   color: #015a96;
   font-family: sans-serif;
 }

步骤 3：使用输入创建显示

现在，我使用 input 函数创建了一个小输入框。所有生成密码的内容都可以在该输入框中看到。我使用了height of the box 50 px和width 400px。我使用了user-select: none，这样用户就无法点击输入框了。



<input type="text" name="" placeholder="Create password" id="password" readonly>




input {
 padding: 20px;
 user-select: none;
 height: 50px;
 width: 400px;
 border-radius: 6px;
 border: none;
 border: 2px solid #8d0cf7;
 outline: none;
 font-size: 22px;
 }

input::placeholder{
  font-size: 23px;
 }

步骤4：创建两个按钮，分别用于生成和复制密码

最后，我制作了两个布局。一个按钮用于生成密码，另一个按钮用于复制密码。我使用 CSS 代码设计了这两个按钮。我分别使用了、button 50 px和的高度width 155px。background color purplefront color white



<table>
   <th><div id="button" class="btn1"onclick="genPassword()">Generate</div></th>
   <th><a  id="button" class="btn2" onclick="copyPassword()">Copy</a></th>
</table>



#button {
  font-family: sans-serif;
  font-size: 15px;
  margin-top: 40px;
  border: 2px solid #7100cf;
  width: 155px;
  height: 50px;
  text-align: center;
  background-color: #7100cf;
  display: flex;
  color: rgb(255, 255, 255);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;  
}

 .btn2{
   margin-left: 85px
 }

#button:hover {
  color: white;
  background-color: black;
}

步骤 5：使用 JavaScript 代码激活系统

到目前为止，我们只是设计了它。这次我们将使用 JavaScript 代码来实现它。首先，我设置了一个输入 ID 的变量 ( password)。



var password=document.getElementById("password");

现在我已经添加了所有symbols，numbers和alphabetsvar 字符，它们将用于创建随机密码。

然后我使用 var passwordLength 来指示此密码将由多少个字符组成。



 var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 var passwordLength = 12;
 var password = "";

现在我将使用 for 循环创建一个随机密码。这Math.random ()将帮助您创建随机密码。



 for (var i = 0; i <= passwordLength; i++) {
   var randomNumber = Math.floor(Math.random() * chars.length);
   password += chars.substring(randomNumber, randomNumber +1);
  }

我会将该密码（常量）与输入框关联。生成的密码也会显示在输入框中。



document.getElementById("password").value = password;

步骤 6：激活复制按钮

我们已经实现了密码生成系统，现在我们将实现复制按钮。同样，我们确定了一个变量 ( )，用于保存该输入框的copyTextID ( )。输入框中输入的任何内容都可以通过复制按钮进行复制。password



function copyPassword() {
  var copyText = document.getElementById("password");
  copyText.select();
  document.execCommand("copy");  
}

最终的 JavaScript 代码



var password=document.getElementById("password");

 function genPassword() {
    var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var passwordLength = 12;
    var password = "";
 for (var i = 0; i <= passwordLength; i++) {
   var randomNumber = Math.floor(Math.random() * chars.length);
   password += chars.substring(randomNumber, randomNumber +1);
  }
        document.getElementById("password").value = password;
 }

function copyPassword() {
  var copyText = document.getElementById("password");
  copyText.select();
  document.execCommand("copy");  
}

我希望本教程能向你解释我是如何利用 JavaScript 创建这个随机密码系统的。如果你想了解更多，可以观看上面的视频教程。

相关文章：

您还可以下载随机密码生成器源代码。请在评论区告诉我您喜欢这个设计吗？

鏂囩珷鏉ユ簮锛�https://dev.to/code_mystery/random-password-generator-using-javascript-6a