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

最新推荐文章于 2025-05-24 10:11:26 发布

—Qeyser

最新推荐文章于 2025-05-24 10:11:26 发布

阅读量454

点赞数 4

分类专栏： Html 文章标签： html javascript css deepseek

本文链接：https://blog.csdn.net/weixin_42581036/article/details/148138527

版权

Html 专栏收录该内容

16 篇文章

订阅专栏

下面是一个功能完整的密码生成器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分
                
                // 更新UI
                let 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>