如何创建一个密码生成器 – JavaScript

如今，密码生成器可以在互联网上随处可见。如果密码不够强，很多网站就不会让你建立账户。这篇文章将介绍如何创建一个JavaScript密码生成器。

让我们深入了解一下创建密码生成器的方法，使用 Math.random() 来创建随机密码。

使用 Math.random() 方法

JavaScript函数 Math.random() 返回一个介于 [0,1] 范围内（包含 0，但不包含 1）的浮点伪随机数。你可以重新调整这个随机数的范围，以适应需要的范围。

语法

以下是 Math.random() 的语法 −

Math.random()

为了更好地理解创建密码生成器，让我们看一些例子。

例子

在以下例子中，我们运行脚本使用 Math.random() 来生成一个 4 位数的随机密码。

<!DOCTYPE HTML>
<html>
   <body style="text-align:center;background-color:#EAFAF1;">
      <h3>点击生成随机密码</h3>
      <button onclick="changepassword()">点击此处</button>
      <br>
      <div>
         <p id="tutorial"></p>
      </div>
      <script>
         var element_down = document.getElementById("tutorial");
         function passwordgenerator() {
            var pass = '';
            var str = 'WelcomeToTheTutorialsPoint' +
            'qujzkexlxwlkcewxmxekhnexj@#$';
            for (let i = 1; i <= 4; i++) {
               var char = Math.floor(Math.random()
               * str.length + 1);
               pass += str.charAt(char)
            }
            return pass;
         }
         function changepassword() {
            element_down.innerHTML = passwordgenerator();
         }
      </script>
   </body>
</html>

脚本执行后，会生成一个文本输出，同时带有一个单击按钮。当用户点击按钮时，将生成一个 4 位数的随机密码。

例子

考虑以下例子，我们正在运行脚本使用 Math.random() 根据用户输入的长度生成随机密码。

<!DOCTYPE HTML>
<html>
   <body style="text-align:center;background-color:#E8DAEF;">
      <input type="text" id="digitspassword" oninput="generatepassword()" placeholder="Use Single Digits(0-9)"/>
      <p id="tutorial"></p>
      <script>
      function generatepassword(){
         var inputlength=document.getElementById('digitspassword');
         var UserInput=inputlength.value.replace(/[^0-9.]/g, "");
         inputlength.value=UserInput;
         var Results=document.getElementById('tutorial');
         var text = "";
         var shuffle = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
         if(inputlength!==''){
            for( var i=0; i < inputlength.value; i++ ){
               text += shuffle.charAt(Math.floor(Math.random() * shuffle.length));
            }
            Results.innerHTML=text;
         }
      }
      </script>
   </body>
</html>

运行上述脚本后，输出窗口将弹出，显示一个输入字段，让用户输入数字，该字段内带有占位符文本。当用户输入数字后，它将根据用户输入的数字生成一个随机密码。

示例

执行下面的脚本，观察我们如何随机生成密码以及如何使用两个按钮，一个用于生成密码，一个用于复制。

<!DOCTYPE HTML>
<html>
   <body>
      <style>
      #button {
         font-size: 18px;
         margin-top: 15px;
         width: 100px;
         height: 50px;
         text-align: center;
         background-color: #ABEBC6 ;
         display: flex;
         color: rgb(23, 32, 42);
         justify-content: center;
         align-items: center;
         cursor: pointer;
         border-radius: 5px;
      }
      </style>
      <h2>随机生成密码</h2>
      <input type="text" name="" placeholder="创建密码" id="tutorial" readonly>
      <table>
         <th><div id="button" onclick="generatepassword()">生成</div></th>
         <th><a id="button" onclick="passwordcopy()">复制</a></th>
      </table>
      <script>
         var password=document.getElementById("tutorial");
         function generatepassword() {
            var chars = "01239abcdefghijABCDEF45678GHIJKLMNOPQRSTUVWXYZklmnopqrstuvwxyz!@#$%^&*()";
            var passwordLength = 5;
            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("tutorial").value = password;
         }
         function passwordcopy() {
            var copyText = document.getElementById("tutorial");
            copyText.select();
            document.execCommand("copy");
         }
      </script>
   </body>
</html>