数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何用 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>
脚本执行后，它将在网页上生成包含文本字段以及两个按钮（一个用于生成，另一个用于复制）的输出。当用户点击生成按钮时，它将生成密码；当用户点击复制按钮时，生成的密码将被复制。
更新于：2023年4月21日
603 次浏览
广告