对仿真登录页面的解析（js）_登录页面js分析报告怎么写-优快云博客

<!DOCTYPE html>  <!-- 声明文档类型为HTML5 -->
<html lang="zh-CN">  <!-- 指定页面语言为简体中文 -->
<head>  <!-- 头部 -->
    <meta charset="UTF-8">  <!-- 指定字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置视口 -->
    <title>登录页面</title>  <!-- 网页标题 -->
    <style> <!-- css样式 -->
        body{  <!-- 整个页面 -->
            font-family: Arial, sans-serif;  <!-- 设置字体为Arial或无衬线字体 -->
            background-color: #f4f4f4;  <!-- 网页背景为浅灰色 -->
            display: flex;  <!-- 使用flex布局 -->
            justify-content: center;  <!-- 水平居中对齐 -->
            align-items: center;  <!-- 垂直居中对齐 -->
            height: 100vh;  <!-- 高度为视口高度 -->
            margin: 0;  <!-- 清除默认外边距 -->
        }
        .login-container {  <!-- 登录容器样式 -->
            background-color: #fff;  <!-- 登录页块为白色背景 -->
            padding: 20px;  <!-- 内边距20px -->
            border-radius: 5px;  <!-- 圆角边框 -->
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  <!-- 添加阴影效果 -->
            width: 300px;  <!-- 标签的宽度300px -->
        }
        .login-container h2 {  <!-- 登录容器内标题样式 -->
            text-align: center;  <!-- 文本居中 -->
        }
        .login-container input {  <!-- 输入框样式 -->
            width: 100%;  <!-- 宽度100%，即占满整个屏幕 -->
            padding: 10px;  <!-- 内边距10px -->
            margin: 10px 0;  <!-- 上下外边距10px -->
            border: 1px solid #ccc;  <!-- 灰色边框 -->
            border-radius: 3px;  <!-- 圆角边框 -->
        }
        .login-container button {  <!-- 按钮样式 -->
            width: 100%;  <!-- 宽度100% -->
            padding: 10px;  <!-- 内边距10px -->
            background-color: #007BFF;  <!-- 蓝色背景 -->
            color: #fff;  <!-- 白色文字 -->
            border: none;  <!-- 无边框 -->
            border-radius: 3px;  <!-- 圆角边框 -->
            cursor: pointer;  <!-- 鼠标悬停时显示手型光标 -->
        }
        .login-container button:hover {  <!-- 按钮悬停样式 -->
            background-color: #0056b3;  <!-- 深色蓝色背景 -->
        }
        .error {  <!-- 错误信息样式 -->
            color: red;  <!-- 红色文字 -->
            text-align: center;  <!-- 文本居中 -->
            margin-top: 10px;  <!-- 上外边距10px -->
        }
    </style>
</head>
<body> <!-- 主体部分 -->
    <div class="login-container">  <!-- 登录容器div -->
        <h2>用户登录</h2>  <!-- 登录标题 -->
        <input type="text" id="username" placeholder="用户名">  <!-- 用户名输入框 -->
        <input type="password" id="password" placeholder="密码">  <!-- 密码输入框 -->
        <button onclick="login()">登录</button>  <!-- 登录按钮，点击调用login()函数 -->
        <div id="error-message" class="error"></div>  <!-- 错误信息显示区域 -->
    </div>
    <script>  <!-- JavaScript -->
        function login() {  <!-- 定义login()函数 -->
            const username = document.getElementById('username').value;  <!-- 获取用户名输入值 -->
            const password = document.getElementById('password').value;  <!-- 获取密码输入值 -->
            const errorMessage = document.getElementById('error-message');  <!-- 获取错误信息元素 -->

            // 简单验证
            if (username === '' || password === '') {  <!-- 检查用户名或密码是否为空 -->
                errorMessage.textContent = '用户名和密码不能为空';  <!-- 显示错误信息 -->
                return;  <!-- 退出函数 -->
            }

            // 添加调用后端API进行验证的代码
            if (username === 'admin' && password === '123456') {  <!-- 检查用户名密码是否为预设值 -->
                alert('登录成功！');  <!-- 显示登录成功提示 -->
            } else {  <!-- 用户名密码错误时 -->
                errorMessage.textContent = '用户名或密码错误';  <!-- 显示错误信息 -->
            }
        }
    </script>
</body>
</html>