介紹
開發者們大家好！我很高興向大家展示我的最新項目：密碼產生器。該工具旨在幫助您輕鬆建立安全且隨機的密碼。無論您的線上帳戶需要強密碼還是想要練習 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 技能和創建實用 Web 工具之旅的一部分。
作者
以上是建立一個密碼產生器網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！
