随机密码生成
1. 视觉设计
柔和渐变背景：使用淡蓝色到淡紫色的柔和渐变
圆角设计：所有元素都采用圆角设计，营造现代感
玻璃拟态效果：主容器采用半透明背景和微妙阴影
柔和色彩方案：主要使用蓝紫色调，搭配白色和浅灰色
动态元素：按钮有悬停和点击效果，增强交互感
2. 功能特点
密码长度控制：通过滑块选择密码长度（6-32字符）
字符类型选择：可选择包含大写字母、小写字母、数字和特殊符号
密码强度指示器：实时显示密码强度并可视化
一键复制功能：点击复制按钮将密码复制到剪贴板
生成通知：复制成功后显示提示
3. 用户体验
响应式设计，适配各种屏幕尺寸
直观的界面布局，所有选项清晰可见
实时生成密码，用户更改设置后立即更新
视觉反馈（按钮动画、通知等）增强交互体验
4.截图展示：
5.代码重现：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彩虹密码生成器 | 安全又美观</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;color: #4a5568;}.container {width: 100%;max-width: 500px;background: rgba(255, 255, 255, 0.92);border-radius: 20px;box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);padding: 40px 30px;position: relative;overflow: hidden;}.container::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);z-index: -1;}.header {text-align: center;margin-bottom: 30px;position: relative;}.header h1 {color: #4a5568;font-size: 2.5rem;margin-bottom: 10px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;font-weight: 700;}.header p {color: #718096;font-size: 1.1rem;max-width: 80%;margin: 0 auto;line-height: 1.6;}.password-display {position: relative;margin-bottom: 30px;}#password {width: 100%;padding: 18px 20px;font-size: 1.2rem;border: none;border-radius: 12px;background: #f8fafc;box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);color: #2d3748;letter-spacing: 1px;height: 60px;transition: all 0.3s ease;}#password:focus {outline: none;box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(102, 126, 234, 0.2);}.copy-btn {position: absolute;right: 10px;top: 50%;transform: translateY(-50%);background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border: none;color: white;width: 40px;height: 40px;border-radius: 50%;cursor: pointer;display: flex;justify-content: center;align-items: center;transition: all 0.3s ease;box-shadow: 0 4px 6px rgba(118, 75, 162, 0.2);}.copy-btn:hover {transform: translateY(-50%) scale(1.1);box-shadow: 0 6px 10px rgba(118, 75, 162, 0.3);}.settings {background: #f8fafc;border-radius: 15px;padding: 25px;margin-bottom: 30px;box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);}.setting-item {margin-bottom: 20px;}.setting-item:last-child {margin-bottom: 0;}.setting-item label {display: block;margin-bottom: 8px;font-weight: 600;color: #4a5568;font-size: 1rem;}.length-container {display: flex;align-items: center;gap: 15px;}#length {flex: 1;-webkit-appearance: none;height: 8px;border-radius: 4px;background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);outline: none;}#length::-webkit-slider-thumb {-webkit-appearance: none;width: 22px;height: 22px;border-radius: 50%;background: white;border: 2px solid #667eea;cursor: pointer;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}#length-value {min-width: 40px;text-align: center;font-weight: 700;color: #764ba2;font-size: 1.1rem;}.checkbox-group {display: flex;flex-wrap: wrap;gap: 15px;}.checkbox-item {display: flex;align-items: center;gap: 8px;flex: 1 0 calc(50% - 15px);}.checkbox-item input {width: 18px;height: 18px;accent-color: #667eea;cursor: pointer;}.checkbox-item label {margin-bottom: 0;font-weight: 500;cursor: pointer;user-select: none;}.strength-meter {height: 10px;background: #edf2f7;border-radius: 5px;overflow: hidden;margin-top: 5px;}.strength-bar {height: 100%;width: 0;border-radius: 5px;transition: width 0.4s ease;}.generate-btn {width: 100%;padding: 18px;font-size: 1.1rem;font-weight: 600;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;border: none;border-radius: 12px;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 6px 12px rgba(118, 75, 162, 0.25);letter-spacing: 1px;}.generate-btn:hover {transform: translateY(-2px);box-shadow: 0 8px 15px rgba(118, 75, 162, 0.35);}.generate-btn:active {transform: translateY(1px);box-shadow: 0 4px 8px rgba(118, 75, 162, 0.25);}.notification {position: fixed;top: 20px;right: 20px;padding: 15px 25px;background: #48bb78;color: white;border-radius: 8px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);transform: translateX(150%);transition: transform 0.3s ease;z-index: 1000;display: flex;align-items: center;gap: 10px;}.notification.show {transform: translateX(0);}.footer {text-align: center;margin-top: 25px;color: #a0aec0;font-size: 0.9rem;}.strength-text {text-align: right;font-size: 0.9rem;font-weight: 600;margin-top: 5px;}@media (max-width: 500px) {.container {padding: 30px 20px;}.header h1 {font-size: 2rem;}.checkbox-item {flex: 1 0 100%;}}</style>
</head>
<body><div class="container"><div class="header"><h1>彩虹密码生成器</h1><p>创建安全、独特且易记的密码，保护您的在线账户</p></div><div class="password-display"><input type="text" id="password" placeholder="点击生成按钮创建密码" readonly><button class="copy-btn" id="copy-btn" title="复制密码"><i class="fas fa-copy"></i></button></div><div class="settings"><div class="setting-item"><label for="length">密码长度: <span id="length-value">12</span></label><div class="length-container"><input type="range" id="length" min="6" max="32" value="12"></div></div><div class="setting-item"><label>包含字符类型:</label><div class="checkbox-group"><div class="checkbox-item"><input type="checkbox" id="uppercase" checked><label for="uppercase">大写字母 (A-Z)</label></div><div class="checkbox-item"><input type="checkbox" id="lowercase" checked><label for="lowercase">小写字母 (a-z)</label></div><div class="checkbox-item"><input type="checkbox" id="numbers" checked><label for="numbers">数字 (0-9)</label></div><div class="checkbox-item"><input type="checkbox" id="symbols"><label for="symbols">特殊符号 (!@#$)</label></div></div></div><div class="setting-item"><label>密码强度:</label><div class="strength-meter"><div class="strength-bar" id="strength-bar"></div></div><div class="strength-text" id="strength-text">中等</div></div></div><button class="generate-btn" id="generate-btn"><i class="fas fa-key"></i> 生成安全密码</button><div class="footer"><p>每次使用后请妥善保存您的密码</p></div></div><div class="notification" id="notification"><i class="fas fa-check-circle"></i><span>密码已复制到剪贴板！</span></div><script>document.addEventListener('DOMContentLoaded', function() {// 获取DOM元素const passwordEl = document.getElementById('password');const copyBtn = document.getElementById('copy-btn');const generateBtn = document.getElementById('generate-btn');const lengthEl = document.getElementById('length');const lengthValueEl = document.getElementById('length-value');const uppercaseEl = document.getElementById('uppercase');const lowercaseEl = document.getElementById('lowercase');const numbersEl = document.getElementById('numbers');const symbolsEl = document.getElementById('symbols');const strengthBar = document.getElementById('strength-bar');const strengthText = document.getElementById('strength-text');const notification = document.getElementById('notification');// 字符集const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const lowercase = 'abcdefghijklmnopqrstuvwxyz';const numbers = '0123456789';const symbols = '!@#$%^&*()_+-=[]{}|;:,.<>?';// 更新密码长度显示lengthEl.addEventListener('input', function() {lengthValueEl.textContent = this.value;generatePassword();});// 当字符类型改变时重新生成密码[uppercaseEl, lowercaseEl, numbersEl, symbolsEl].forEach(el => {el.addEventListener('change', generatePassword);});// 生成密码function generatePassword() {let charset = '';let password = '';// 根据选项构建字符集if (uppercaseEl.checked) charset += uppercase;if (lowercaseEl.checked) charset += lowercase;if (numbersEl.checked) charset += numbers;if (symbolsEl.checked) charset += symbols;// 如果没有选择任何字符类型，使用默认值if (charset === '') {charset = uppercase + lowercase + numbers;}// 生成密码const length = parseInt(lengthEl.value);for (let i = 0; i < length; i++) {const randomIndex = Math.floor(Math.random() * charset.length);password += charset[randomIndex];}passwordEl.value = password;updateStrengthIndicator(password);}// 更新密码强度指示器function updateStrengthIndicator(password) {let strength = 0;const length = password.length;// 长度评分strength += Math.min(length / 4, 5);// 字符多样性评分const hasUppercase = /[A-Z]/.test(password);const hasLowercase = /[a-z]/.test(password);const hasNumbers = /[0-9]/.test(password);const hasSymbols = /[^A-Za-z0-9]/.test(password);const diversity = [hasUppercase, hasLowercase, hasNumbers, hasSymbols].filter(Boolean).length;strength += diversity * 2;// 计算强度百分比（0-100）const strengthPercent = Math.min(Math.max(strength / 9 * 100, 0), 100);strengthBar.style.width = `${strengthPercent}%`;// 更新颜色和文本if (strengthPercent < 40) {strengthBar.style.background = '#e53e3e';strengthText.textContent = '弱';strengthText.style.color = '#e53e3e';} else if (strengthPercent < 70) {strengthBar.style.background = '#dd6b20';strengthText.textContent = '中等';strengthText.style.color = '#dd6b20';} else if (strengthPercent < 90) {strengthBar.style.background = '#38a169';strengthText.textContent = '强';strengthText.style.color = '#38a169';} else {strengthBar.style.background = '#00b5d8';strengthText.textContent = '非常强';strengthText.style.color = '#00b5d8';}}// 复制密码到剪贴板copyBtn.addEventListener('click', function() {if (!passwordEl.value) return;passwordEl.select();document.execCommand('copy');// 显示通知notification.classList.add('show');setTimeout(() => {notification.classList.remove('show');}, 2000);});// 生成按钮点击事件generateBtn.addEventListener('click', generatePassword);// 初始化生成一个密码generatePassword();});</script>
</body>
</html>