使用HTML CSS和JavaScript构建密码生成器应用
在本文中,我们将使用HTML、CSS和JavaScript构建一个密码生成器应用程序。该应用程序将根据用户的偏好生成强密码和安全密码,例如密码长度和字符类型。它旨在为用户提供一个方便的工具来生成难以猜测且增强在线安全性的随机密码。
先决条件:
方法
- 创建一个HTML表单,用于捕获用户对密码生成的偏好,例如长度和字符类型。
- 使用CSS来为表单添加样式,使其具有视觉吸引力。
- 编写JavaScript代码来处理表单提交并根据用户的偏好生成密码。
- JavaScript基于用户选择的选项(小写字母、大写字母、数字和特殊字符)和长度生成随机密码。它允许将生成的密码复制到剪贴板。
- 实现一个函数,使用所选字符类型和长度生成随机密码。
- 在网页上显示生成的密码,供用户查看和复制。
- 添加事件监听器来处理用户交互和触发密码生成。
示例: 在这个例子中,我们使用了上面解释的方法。
Javascript
// script.js
function generate() {
let dictionary = "";
if (document.getElementById("lowercaseCb").checked) {
dictionary += "qwertyuiopasdfghjklzxcvbnm";
}
if (document.getElementById("uppercaseCb").checked) {
dictionary += "QWERTYUIOPASDFGHJKLZXCVBNM";
}
if (document.getElementById("digitsCb").checked) {
dictionary += "1234567890";
}
if (document.getElementById("specialsCb").checked) {
dictionary += "!@#$%^&*()_+-={}[];<>:";
}
const length = document.querySelector(
'input[type="range"]').value;
if (length < 1 || dictionary.length === 0) {
return;
}
let password = "";
for (let i = 0; i < length; i++) {
const pos = Math.floor(Math.random() * dictionary.length);
password += dictionary[pos];
}
document.querySelector(
'input[type="text"]').value = password;
}
[
...document.querySelectorAll(
'input[type="checkbox"], button.generate'),
].forEach((elem) => {
elem.addEventListener("click", generate);
});
document.querySelector('input[type="range"]').addEventListener(
"input", (e) => {
document.querySelector(
"div.range span").innerHTML = e.target.value;
generate();
});
document.querySelector("div.password button").addEventListener(
"click", () => {
const pass = document.querySelector('input[type="text"]').value;
navigator.clipboard.writeText(pass).then(() => {
document.querySelector(
"div.password button").innerHTML = "copied!";
setTimeout(() => {
document.querySelector(
"div.password button").innerHTML = "copy";
}, 1000);
});
});
generate();
JavaScript
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Password Generator</title>
</head>
<body>
<h1>Password Generator</h1>
<div class="generator">
<div class="password">
<input type="text" value="test" />
<button>copy</button>
</div>
<div class="range">
<input type="range" min="4"
max="24" value="8" />
<span>8</span>
</div>
<div class="options">
<div class="option">
<label>
<input type="checkbox"
id="lowercaseCb" checked />
<span>a-z</span>
</label>
</div>
<div class="option">
<label>
<input type="checkbox"
id="uppercaseCb" />
<span>A-Z</span>
</label>
</div>
<div class="option">
<label>
<input type="checkbox"
id="digitsCb" />
<span>0-9</span>
</label>
</div>
<div class="option">
<label>
<input type="checkbox"
id="specialsCb" />
<span>!@$#%^</span>
</label>
</div>
</div>
<button class="generate">
generate
</button>
</div>
<script src="script.js"></script>
</body>
</html>
HTML
CSS
/* style.css */
@import url(
"https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
body {
background-color: #f8f8f8;
color: #333;
font-family: "Roboto Mono", monospace;
}
.generator {
background-color: #f5f5f5;
width: 250px;
margin: 150px auto;
padding: 20px;
border-radius: 10px;
}
div.password {
display: grid;
grid-template-columns: auto min-content;
border-radius: 10px;
overflow: hidden;
}
div.password input {
padding: 7px 10px;
background-color: #ddd;
border: 0;
color: #333;
}
button {
background-color: #4caf50;
color: #fff;
text-transform: uppercase;
padding: 5px 15px;
border: 0;
border-radius: 10px;
}
div.password button {
border-radius: 0;
}
div.range {
margin: 10px 0;
display: grid;
grid-template-columns: 1fr min-content;
}
div.range span {
background-color: #ddd;
padding: 10px;
margin-left: 20px;
min-width: 30px;
text-align: center;
border-radius: 10px;
}
div.options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
div.options label {
display: block;
background-color: #ddd;
padding: 10px;
border-radius: 10px;
cursor: pointer;
font-family: sans-serif;
}
button.generate {
width: 100%;
margin-top: 10px;
padding: 10px;
}
h1 {
text-align: center;
color: #4caf50;
}
CSS
输出: