JavaScript练习题：制作一个简单的网页随机密码生成器-CSDN博客

本文链接：https://blog.csdn.net/CostBuild/article/details/140995055

第一部分：考点与作答区

考点：

条件语句：使用if-else语句进行条件判断。
循环语句：使用for循环生成随机密码。

作答区： 请创建一个简单的网页随机密码生成器，包含以下功能：

一个输入框，用于输入密码长度。
一个生成密码的按钮。
一个显示生成的随机密码的文本框。
当点击生成密码按钮时，显示长度为输入框中数值的随机密码。

第二部分：解题思路与答案

解题思路：

使用HTML创建输入框、按钮和显示随机密码的文本框。
使用JavaScript为生成密码按钮添加onclick事件处理函数。
在事件处理函数中使用for循环生成随机密码，并显示在文本框中。

答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机密码生成器</title>
    <script>
        function generatePassword() {
            var length = parseInt(document.getElementById('length').value);
            var password = '';
            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-_=+[]{}|;:,.<>?';
            for (var i = 0; i < length; i++) {
                password += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            document.getElementById('password').innerHTML = password;
        }
    </script>
</head>
<body>
    <input type="number" id="length" placeholder="输入密码长度">
    <button onclick="generatePassword()">生成密码</button>
    <p>生成的密码: <span id="password">无</span></p>
</body>
</html>

第三部分：扩展考点与扩展作答区

扩展考点：

错误处理：添加代码以处理可能的输入错误，如非数字输入。
用户界面改进：使用CSS改进密码生成器的用户界面，使其更加美观和用户友好。

扩展作答区：

添加代码以在用户输入非数字时显示错误消息。
使用CSS为密码生成器添加样式，如边框、背景色、字体等。

第四部分：扩展解答思路与答案

扩展解答思路：

在JavaScript中添加条件语句来检查用户输入是否为数字，并在不是数字时显示错误消息。
使用CSS为密码生成器添加样式。

扩展答案：

<!DOCTYPE html>
<html lang="en">
<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;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .password-generator {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            background-color: #fff;
        }
        .password-generator input {
            margin-bottom: 10px;
        }
        .password-generator button {
            margin-right: 5px;
        }
        .error {
            color: red;
            font-size: 0.8em;
        }
    </style>
    <script>
        function generatePassword() {
            var length = parseInt(document.getElementById('length').value);
            var password = '';
            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-_=+[]{}|;:,.<>?';
            var errorMessage = '';
            if (isNaN(length)) {
                errorMessage = '请输入有效的数字！';
            } else {
                for (var i = 0; i < length; i++) {
                    password += chars.charAt(Math.floor(Math.random() * chars.length));
                }
            }
            document.getElementById('password').innerHTML = errorMessage || password;
        }
    </script>
www.zjjrrcw.com
www.hzbjrcw.com
www.tzlqrcw.com
www.yzyzrcw.com
www.gznkrc.com
</head>
<body>
    <div class="password-generator">
        <input type="number" id="length" placeholder="输入密码长度">
        <button onclick="generatePassword()">生成密码</button>
        <p id="password"></p>
    </div>
</body>
</html>

在这个扩展答案中，我们通过JavaScript添加了错误处理来检查输入是否为数字，并在不是数字时显示错误消息。同时，我们使用CSS为密码生成器添加了样式，使其看起来更加美观和用户友好。这个练习题的扩展部分适合那些已经掌握了HTML和JavaScript基础，并希望学习如何创建更完善和用户友好的交互式网页的开发者。