极客笔记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>
Click to Generate Random Passwords
</h3>
<button onclick="changepassword()">
Click Here
</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>Generate Password Randomly</h2>
<input type="text" name="" placeholder="Create password" id="tutorial" readonly>
<table>
<th><div id="button" onclick="generatepassword()">Generate</div></th>
<th><a id="button" onclick="passwordcopy()">Copy</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>
当脚本被执行时，它会在网页上生成一个由文本字段和两个按钮组成的输出。一个按钮是“生成”，另一个按钮是“复制”。当用户点击生成按钮时，它会生成一个密码，当用户点击复制按钮时，生成的密码将被复制。