2.制作“随机密码生成”程序,完成如图4-2所示界面,JavaScript编程实现“生成密码”的功能。密码长度为:1~16 位,密码数量:1~10 个。
时间: 2023-06-26 17:10:33 浏览: 126
JAVA编程实现随机生成指定长度的密码功能【大小写和数字组合】
很高兴为您提供帮助,以下是随机密码生成程序的JavaScript代码:
```
<!DOCTYPE html>
<html>
<head>
<title>随机密码生成</title>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
label {
font-size: 20px;
margin-bottom: 10px;
font-weight: bold;
}
input[type="number"] {
width: 150px;
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: none;
margin-bottom: 20px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
margin-bottom: 50px;
}
.passwords {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 50px;
}
.password {
background-color: white;
color: black;
padding: 10px 20px;
border-radius: 5px;
margin: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>随机密码生成器</h1>
<div class="container">
<label for="length">密码长度:</label>
<input type="number" id="length" min="1" max="16" value="8">
<label for="quantity">密码数量:</label>
<input type="number" id="quantity" min="1" max="10" value="5">
<button onclick="generatePasswords()">生成密码</button>
<div id="passwords"></div>
</div>
<script>
function generatePasswords() {
var length = document.getElementById("length").value;
var quantity = document.getElementById("quantity").value;
var passwordsDiv = document.getElementById("passwords");
passwordsDiv.innerHTML = "";
for (var i = 0; i < quantity; i++) {
var password = "";
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var j = 0; j < length; j++) {
password += characters.charAt(Math.floor(Math.random() * characters.length));
}
var passwordDiv = document.createElement("div");
passwordDiv.classList.add("password");
passwordDiv.innerHTML = password;
passwordsDiv.appendChild(passwordDiv);
}
}
</script>
</body>
</html>
```
这段代码会生成一个界面,其中包含两个输入框和一个按钮。用户可以在输入框中输入密码长度和密码数量,然后点击按钮生成对应数量的随机密码。每个密码会显示在页面上,以方便用户复制和使用。
阅读全文