刘恒枫-20281142.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录界面</title>
    <style>
        html, body {
            height: 100%;
        }
        .flex-center {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .root {
            height: 100%;
        }
        .login-box {
            box-shadow: 0 0 5px 0px darkgray;
            width: 500px;
            height: 400px;
            flex-direction: column;
        }
        .login-box input {
            width: 80%;
            margin: 10px;
            appearance: none;
            border: none;
            height: 40px;
            border-bottom: solid 2px gray;
        }
        .login-box input:focus {
            outline: none;
        }
        .login-box button {
            appearance: none;
            margin: 30px;
            color: white;
            background-color: green;
            border-radius: 20px;
            width: 200px;
            height: 50px;
        }
        .login-box button:focus {
            outline: none;
        }
    </style>
</head>
<body>
    <div class="root flex-center">
        <div class="login-box flex-center">
            <h1>用户登录</h1>
            <input id="id" placeholder="账号"/>
            <input id="pd" type="password" placeholder="密码"/>
            <button onclick="handleLogin()" type="button">登录</button>
        </div>
    </div>
</body>
</html>

<script>
    const userId = "LiuHengfeng"
    const userPasswd   = "123456"
    const handleLogin = () => {
        const id = document.getElementById("id").value
        const pd = document.getElementById("pd").value
        if(userId === id && userPasswd === pd) {
            window.alert("登录成功！")
        } else {
            window.alert("登录失败！")
        }
    }
</script>