JavaScript 实现生成随机密码的示例详解

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>随机密码生成器</title>  
</head>  
<body>  
    <!-- 创建一个输入框，用户可以在其中输入所需的密码长度 -->  
    <input type="text" id="passwordLength" placeholder="密码长度">  
    <!-- 创建一个按钮，当用户点击时，将调用generatePassword函数来生成密码 -->  
    <button onclick="generatePassword()">生成密码</button>  
    <!-- 创建一个段落，用于显示生成的密码 -->  
    <p id="passwordOutput"></p>  
    <!-- 引入passwordGenerator.js脚本文件，该文件包含生成随机密码的逻辑 -->  
    <script src="passwordGenerator.js"></script>  
</body>  
</html>

// generatePassword函数定义，用于生成随机密码  
function generatePassword() {  
    // 获取用户输入的密码长度，确保输入的是一个有效的数字  
    const passwordLengthInput = document.getElementById('passwordLength');  
    const passwordLength = parseInt(passwordLengthInput.value);  
    if (isNaN(passwordLength) || passwordLength < 1) {  
        alert('请输入一个有效的密码长度！');  
        return;  
    }  
  
    // 定义允许的字符集，用于生成密码的字符范围  
    const allowedCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';  
  
    // 初始化密码变量为空字符串  
    let password = '';  
  
    // 使用循环生成指定长度的随机密码  
    for (let i = 0; i < passwordLength; i++) {  
        // 获取允许的字符集的随机索引  
        const randomIndex = Math.floor(Math.random() * allowedCharacters.length);  
        // 将随机字符添加到密码字符串中  
        password += allowedCharacters[randomIndex];  
    }  
  
    // 显示生成的密码到页面上的指定元素中  
    const passwordOutput = document.getElementById('passwordOutput');  
    passwordOutput.textContent = password;  
}

function generateRandomPassword(length) {  
    var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";  
    var result = "";  
    for (var i = 0; i < length; i++) {  
        result += characters.charAt(Math.floor(Math.random() * characters.length));  
    }  
    return result;  
}  
  
// 调用函数生成一个长度为10的随机密码  
var password = generateRandomPassword(10);  
console.log(password);