密码生成器需求：按输入值生成指定数量大写字符并随机分布

需求说明 #

当前密码生成器在勾选「Include Uppercase」时仅生成1个随机大写字母，需修改为：根据「UClength」输入框的数值生成对应数量的大写字母，并将这些大写字母随机分布在最终密码字符串中。

修改后的完整代码 #

HTML部分（补充输入框状态控制逻辑）

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Password Generator</title>
    <link rel="stylesheet" href="StyleSheet1.css" />
</head>
<body>
    <div id="password-generator">
        <h1>Password Generator</h1>
        <label for="length">Password Length</label>
        <input type="number" id="length" value="12" min="8" max="30" />

        <br />

        <label for="uppercase">Include Uppercase</label>
        <input type="checkbox" id="uppercase" onclick="enableUClength()" />

        <br />

        <label for="UClength">Uppercase Length</label>
        <input type="number" id="UClength" value="3" min="3" max="10" disabled />

        <br />

        <label for="numbers">Include Numbers:</label>
        <input type="checkbox" id="numbers" checked />

        <br />

        <label for="symbols">Include Symbols</label>
        <input type="checkbox" id="symbols" checked />

        <br />

        <button onclick="generatePassword()">Generate Password</button>
        <br />
        <button onclick="copyToClipboard()">Copy to Clipboard</button>

        <textarea name="" id="password" rows="3" readonly></textarea>

        <div id="success-alert" class="alert alert-success" role="alert" style="display: none;">
            Password generated successfully !
        </div>

    </div>
    <script src="Script1.js"></script>

</body>
</html>

注：给UClength输入框添加默认disabled属性，仅当勾选大写复选框时启用。

JavaScript部分

// 控制UClength输入框的启用/禁用
function enableUClength() {
    const ucCheckbox = document.getElementById('uppercase');
    const ucLengthInput = document.getElementById('UClength');
    ucLengthInput.disabled = !ucCheckbox.checked;
    if (!ucCheckbox.checked) {
        ucLengthInput.value = 3;
    }
}

function generatePassword() {
    const length = parseInt(document.getElementById('length').value);
    const ucCount = parseInt(document.getElementById('UClength').value);
    const useUppercase = document.getElementById('uppercase').checked;
    const useNumbers = document.getElementById('numbers').checked;
    const useSymbols = document.getElementById('symbols').checked;

    const uppercaseChars = 'QWERTZUIOPASDFGHJKLYXCVBNM';
    const lowercaseChars = 'qwertzuiopasdfghjklyxcvbnm';
    const numberChars = '1234567890';
    const symbolChars = ';~!@#$%^&*_-+=`|\\(){}\[\]:;"\'<>,.?/';

    let passwordChars = [];

    // 添加指定数量的大写字母
    if (useUppercase) {
        for (let i = 0; i < ucCount; i++) {
            const randomIndex = Math.floor(Math.random() * uppercaseChars.length);
            passwordChars.push(uppercaseChars[randomIndex]);
        }
    }

    // 添加至少1个数字（如果勾选）
    if (useNumbers) {
        const randomIndex = Math.floor(Math.random() * numberChars.length);
        passwordChars.push(numberChars[randomIndex]);
    }

    // 添加至少1个符号（如果勾选）
    if (useSymbols) {
        const randomIndex = Math.floor(Math.random() * symbolChars.length);
        passwordChars.push(symbolChars[randomIndex]);
    }

    // 计算剩余需要填充的字符数量
    let remainingChars = length - passwordChars.length;

    // 生成剩余字符
    let validChars = lowercaseChars;
    if (useUppercase) validChars += uppercaseChars;
    if (useNumbers) validChars += numberChars;
    if (useSymbols) validChars += symbolChars;

    for (let i = 0; i < remainingChars; i++) {
        const randomIndex = Math.floor(Math.random() * validChars.length);
        passwordChars.push(validChars[randomIndex]);
    }

    // 打乱数组实现随机分布
    shuffleArray(passwordChars);

    // 输出最终密码
    const password = passwordChars.join('');
    document.getElementById('password').value = password;
    
    // 显示成功提示
    document.getElementById('success-alert').style.display = 'block';
    setTimeout(() => {
        document.getElementById('success-alert').style.display = 'none';
    }, 3000);
}

// 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]];
    }
}

// 实现复制到剪贴板功能
function copyToClipboard() {
    const passwordTextarea = document.getElementById('password');
    passwordTextarea.select();
    navigator.clipboard.writeText(passwordTextarea.value)
        .then(() => console.log('Password copied to clipboard'))
        .catch(err => console.error('Failed to copy: ', err));
}

关键改动说明 #

1. 输入框状态控制：新增enableUClength函数，避免未勾选大写时误操作UClength输入框。
2. 固定大写字母数量：通过循环生成指定数量的大写字母，确保数量符合输入值。
3. 随机分布实现：使用Fisher-Yates洗牌算法打乱字符数组，让所有字符（包括大写字母）随机分布。
4. 类型转换处理：将输入框的字符串值转为整数，避免计算逻辑错误。

内容的提问来源于stack exchange，提问作者The SkyRider