极客教程如何创建一个密码生成器 – 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>
当脚本被执行时，它将在网页上生成一个文本字段和两个按钮，一个是生成，另一个是复制。当用户点击生成按钮时，它将生成密码，当用户点击复制时，生成的密码将被复制。