当前位置：首页 > backend >正文

用 Deepseek 写的 html+js 密码生成器

backend 2025/5/23 5:13:08

下面是一个功能完整的密码生成器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>