用 Deepseek 寫的 html+js 密碼生成器

下面是一個功能完整的密碼生成器HTML+JS實現，包含數字、小寫字母、大寫字母、符號、避免重復字符和密碼長度設置功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>密碼生成器</title><style>body {font-family: Arial, sans-serif;max-width: 600px;margin: 0 auto;padding: 20px;background-color: #f5f5f5;}.container {background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}h1 {text-align: center;color: #333;}.form-group {margin-bottom: 15px;}label {display: block;margin-bottom: 5px;font-weight: bold;}input[type="range"] {width: 100%;}.output {display: flex;margin-top: 20px;}#password {flex-grow: 1;padding: 10px;font-size: 16px;border: 1px solid #ddd;border-radius: 4px 0 0 4px;}button {padding: 10px 15px;background-color: #4CAF50;color: white;border: none;border-radius: 0 4px 4px 0;cursor: pointer;font-size: 16px;}button:hover {background-color: #45a049;}.length-value {display: inline-block;width: 30px;text-align: center;}.strength-meter {height: 5px;background-color: #ddd;margin-top: 10px;border-radius: 5px;overflow: hidden;}.strength-bar {height: 100%;width: 0%;transition: width 0.3s, background-color 0.3s;}</style>
</head>
<body><div class="container"><h1>密碼生成器</h1><div class="form-group"><label for="length">密碼長度: <span id="lengthValue" class="length-value">12</span></label><input type="range" id="length" min="4" max="64" value="12"></div><div class="form-group"><label><input type="checkbox" id="lowercase" checked> 小寫字母 (a-z)</label></div><div class="form-group"><label><input type="checkbox" id="uppercase" checked> 大寫字母 (A-Z)</label></div><div class="form-group"><label><input type="checkbox" id="numbers" checked> 數字 (0-9)</label></div><div class="form-group"><label><input type="checkbox" id="symbols" checked> 符號 (!@#$%^&*等)</label></div><div class="form-group"><label><input type="checkbox" id="noRepeat"> 避免重復字符</label></div><div class="form-group"><label>密碼強度:</label><div class="strength-meter"><div class="strength-bar" id="strengthBar"></div></div></div><div class="output"><input type="text" id="password" readonly><button id="generate">生成</button></div><div class="form-group" style="margin-top: 20px;"><button id="copy" style="width: 100%; border-radius: 4px;">復制密碼</button></div></div><script>document.addEventListener('DOMContentLoaded', function() {// 獲取DOM元素const lengthSlider = document.getElementById('length');const lengthValue = document.getElementById('lengthValue');const lowercaseCheckbox = document.getElementById('lowercase');const uppercaseCheckbox = document.getElementById('uppercase');const numbersCheckbox = document.getElementById('numbers');const symbolsCheckbox = document.getElementById('symbols');const noRepeatCheckbox = document.getElementById('noRepeat');const generateBtn = document.getElementById('generate');const passwordField = document.getElementById('password');const copyBtn = document.getElementById('copy');const strengthBar = document.getElementById('strengthBar');// 字符集const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const numberChars = '0123456789';const symbolChars = '!@#$%^&*()_+~`|}{[]\\:;?><,./-=';// 更新長度顯示lengthSlider.addEventListener('input', function() {lengthValue.textContent = this.value;});// 生成密碼generateBtn.addEventListener('click', generatePassword);// 復制密碼copyBtn.addEventListener('click', function() {if (passwordField.value) {passwordField.select();document.execCommand('copy');copyBtn.textContent = '已復制!';setTimeout(() => {copyBtn.textContent = '復制密碼';}, 2000);}});// 初始生成一個密碼generatePassword();function generatePassword() {// 獲取選項const length = parseInt(lengthSlider.value);const includeLower = lowercaseCheckbox.checked;const includeUpper = uppercaseCheckbox.checked;const includeNumbers = numbersCheckbox.checked;const includeSymbols = symbolsCheckbox.checked;const noRepeat = noRepeatCheckbox.checked;// 驗證至少選擇了一個字符集if (!includeLower && !includeUpper && !includeNumbers && !includeSymbols) {alert('請至少選擇一種字符類型!');return;}// 構建可用字符集let chars = '';if (includeLower) chars += lowercaseChars;if (includeUpper) chars += uppercaseChars;if (includeNumbers) chars += numberChars;if (includeSymbols) chars += symbolChars;let password = '';if (noRepeat) {// 避免重復字符的模式if (length > chars.length) {alert(`避免重復字符模式下，密碼長度不能超過可用字符數 (${chars.length})`);return;}// 將字符集轉換為數組并打亂順序const charsArray = chars.split('');shuffleArray(charsArray);// 選取前length個字符password = charsArray.slice(0, length).join('');} else {// 普通模式，允許重復字符for (let i = 0; i < length; i++) {const randomIndex = Math.floor(Math.random() * chars.length);password += chars[randomIndex];}}// 顯示密碼passwordField.value = password;// 更新強度條updateStrengthBar(password);}// 打亂數組順序 (Fisher-Yates算法)function shuffleArray(array) {for (let i = array.length - 1; i > 0; i--) {const j = Math.floor(Math.random() * (i + 1));[array[i], array[j]] = [array[j], array[i]];}return array;}// 更新密碼強度條function updateStrengthBar(password) {let strength = 0;// 長度評分if (password.length >= 12) strength += 2;else if (password.length >= 8) strength += 1;// 字符種類評分const hasLower = /[a-z]/.test(password);const hasUpper = /[A-Z]/.test(password);const hasNumber = /[0-9]/.test(password);const hasSymbol = /[^a-zA-Z0-9]/.test(password);const charTypes = [hasLower, hasUpper, hasNumber, hasSymbol].filter(Boolean).length;strength += charTypes - 1; // 每多一種類型加1分// 更新UIlet width = 0;let color = '#ff0000'; // 紅色if (strength <= 1) {width = 25;color = '#ff0000'; // 弱 - 紅色} else if (strength <= 3) {width = 50;color = '#ff9900'; // 中等 - 橙色} else if (strength <= 5) {width = 75;color = '#33cc33'; // 強 - 綠色} else {width = 100;color = '#009900'; // 非常強 - 深綠色}strengthBar.style.width = width + '%';strengthBar.style.backgroundColor = color;}});</script>
</body>
</html>

功能說明

這個密碼生成器包含以下功能：

密碼長度控制：通過滑塊可以設置4到64位的密碼長度
字符類型選擇：
- 小寫字母 (a-z)
- 大寫字母 (A-Z)
- 數字 (0-9)
- 符號 (!@#$%^&*等)
避免重復字符：勾選后生成的密碼不會包含重復字符
密碼強度指示：根據密碼長度和使用的字符類型顯示強度條
一鍵復制：方便復制生成的密碼
響應式設計：適配不同屏幕尺寸

使用方法

調整滑塊設置密碼長度
選擇需要的字符類型（至少選擇一種）
如需避免重復字符，勾選相應選項
點擊"生成"按鈕創建密碼
點擊"復制密碼"按鈕將密碼復制到剪貼板

您可以根據需要進一步自定義樣式或添加更多功能。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/84892.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/84892.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/84892.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！