介绍
开发者们大家好！我很高兴向大家展示我的最新项目：密码生成器。该工具旨在帮助您轻松创建安全且随机的密码。无论您的在线帐户需要强密码还是想要练习 JavaScript 技能，此密码生成器都是您工具包的绝佳补充。
项目概况
密码生成器是一个基于网络的应用程序，允许用户使用各种配置生成密码。您可以自定义密码长度并包含或排除特定字符类型，例如小写字母、大写字母、数字和符号。该项目展示了如何使用 JavaScript 构建动态密码生成器，并结合使用 HTML 和 CSS 构建的干净且用户友好的界面。
特征
-
可自定义密码长度：使用滑块调整生成的密码的长度。
-
字符类型选择：选择密码中包含的字符类型（小写、大写、数字、符号）。
-
生成并复制：生成随机密码并轻松将其复制到剪贴板。
使用的技术
-
HTML：提供密码生成器的结构和布局。
-
CSS：设置界面样式，确保现代且响应式的设计。
-
JavaScript：处理密码生成逻辑，包括用户交互和密码复制。
项目结构
以下是项目结构的概述：
Password-Generator/
├── index.html
├── style.css
└── script.js
登录后复制
-
index.html：包含密码生成器的 HTML 结构。
-
style.css：包含 CSS 样式以创建有吸引力的响应式设计。
-
script.js：管理密码生成功能和用户交互。
安装
要开始该项目，请按照以下步骤操作：
-
克隆存储库：
git clone https://github.com/abhishekgurjar-in/Password-Generator.git
登录后复制
-
打开项目目录:
cd Password-Generator
登录后复制
-
运行项目:
- 在网络浏览器中打开index.html 文件以使用密码生成器。
用法
-
在网络浏览器中打开网站。
-
使用滑块调整密码长度。
-
选择或取消选择您想要包含的字符类型。
-
通过单击“生成密码”按钮生成密码。
-
通过单击复制图标将密码复制到剪贴板。
代码说明
超文本标记语言
index.html 文件定义了密码生成器的结构，包括输入字段、控件和显示区域。这是一个片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<script src="script.js" defer></script>
<title>Password Generator</title>
</head>
<body>
<div class="container">
<h1>Password Generator</h1>
<div class="inputBox">
<input type="text" class="passBox" id="passBox" disabled />
<span class="material-icons" id="copyIcon">content_copy</span>
</div>
<input type="range" min="1" max="30" value="8" id="inputSlider" />
<div class="row">
<p>Password Length</p>
<span id="sliderValue"></span>
</div>
<div class="row">
<label for="lowercase">Include Lowercase Letters (a-z)</label>
<input type="checkbox" name="lowercase" id="lowercase" checked/>
</div>
<div class="row">
<label for="uppercase">Include Uppercase Letters (A-Z)</label>
<input type="checkbox" name="uppercase" id="uppercase" checked/>
</div>
<div class="row">
<label for="numbers">Include Numbers (0-9)</label>
<input type="checkbox" name="numbers" id="numbers" checked/>
</div>
<div class="row">
<label for="symbols">Include Symbols (@-*)</label>
<input type="checkbox" name="symbols" id="symbols" checked/>
</div>
<button type="button" class="genBtn" id="genBtn">
Generate Password
</button>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
登录后复制
CSS
style.css 文件设置密码生成器的样式，使其具有视觉吸引力和响应能力。以下是一些关键样式：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
max-width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000;
color: #fff;
font-weight: 600;
flex-direction: column;
}
.container {
border: 0.5px solid #fff;
border-radius: 10px;
padding: 28px 32px;
display: flex;
flex-direction: column;
background: transparent;
box-shadow: 8px 8px 4px #909090, 8px 8px 0px #575757;
}
.container h1 {
font-size: 1.4rem;
margin-block: 8px;
}
.inputBox {
position: relative;
}
.inputBox span {
position: absolute;
top: 16px;
right: 6px;
color: #000;
font-size: 28px;
cursor: pointer;
z-index: 2;
}
.passBox {
background-color: #fff;
border: none;
outline: none;
padding: 10px;
width: 300px;
border-radius: 4px;
font-size: 20px;
margin-block: 8px;
text-overflow: ellipsis;
}
.row {
display: flex;
margin-block: 8px;
}
.row p, .row label {
flex-basis: 100%;
font-size: 18px;
}
.row input[type="checkbox"] {
width: 20px;
height: 20px;
}
.genBtn {
border: none;
outline: none;
background-color: #2c619e;
padding: 12px 24px;
color: #fff;
font-size: 18px;
margin-block: 8px;
font-weight: 700;
cursor: pointer;
border-radius: 4px;
}
.genBtn:hover {
background-color: #0066ff;
}
.footer {
color: white;
margin-top: 150px;
text-align: center;
}
.footer p {
font-size: 16px;
font-weight: 200;
}
登录后复制
JavaScript
script.js 文件包含生成密码、管理用户交互以及将密码复制到剪贴板的逻辑。这是一个片段：
let inputSlider = document.getElementById("inputSlider");
let sliderValue = document.getElementById("sliderValue");
let passBox = document.getElementById("passBox");
let lowercase = document.getElementById("lowercase");
let uppercase = document.getElementById("uppercase");
let numbers = document.getElementById("numbers");
let symbols = document.getElementById("symbols");
let genBtn = document.getElementById("genBtn");
let copyIcon = document.getElementById("copyIcon");
// Showing input slider value
sliderValue.textContent = inputSlider.value;
inputSlider.addEventListener("input", () => {
sliderValue.textContent = inputSlider.value;
});
genBtn.addEventListener("click", () => {
passBox.value = generatePassword();
});
let lowerChars = "abcdefghijklmnopqrstuvwxyz";
let upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let allNumbers = "0123456789";
let allSymbols = "~!@#$%^&*";
// Function to generate Password
function generatePassword() {
let genPassword = "";
let allChars = "";
allChars += lowercase.checked ? lowerChars : "";
allChars += uppercase.checked ? upperChars : "";
allChars += numbers.checked ? allNumbers : "";
allChars += symbols.checked ? allSymbols : "";
if (allChars === "") {
return genPassword;
}
let i = 1;
while (i <= inputSlider.value) {
genPassword += allChars.charAt(Math.floor(Math.random() * allChars.length));
i++;
}
return genPassword;
}
copyIcon.addEventListener("click", () => {
if (passBox.value !== "") {
navigator.clipboard.writeText(passBox.value);
copyIcon.innerText = "check";
copyIcon.title = "Password Copied";
setTimeout(() => {
copyIcon.innerHTML = "content_copy";
copy
Icon.title = "";
}, 3000);
}
});
登录后复制
现场演示
您可以在此处查看密码生成器项目的现场演示。
结论
创建密码生成器是一个令人愉快的项目，它使我能够应用我的前端开发技能。该工具对于生成强密码非常有用，并且可以成为您的 Web 开发项目的重要补充。我希望你发现它和我一样有帮助。快乐编码！
制作人员
这个项目是我增强 JavaScript 技能和创建实用网络工具之旅的一部分。
作者
以上是建立一个密码生成器网站的详细内容。更多信息请关注PHP中文网其他相关文章！
