HTML简易的用户名密码登录页面_艾孜尔江撰

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport"
        content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta name="format-detection" content="telephone=no">


</head>

<body>
    <div class="login" style="text-align: center; margin-top: 215px;">
        <h1>Welcome</h1>
        <div class="text">
            <i class="fa fa-user-o" aria-hidden="true"></i><!-- Font Awesome -->
            <input type="text" placeholder="Username" id="name" style="width:auto;height: auto; margin-top: 10px;">
        </div>
        <div class="text">
            <i class="fa fa-lock" aria-hidden="true"></i><!-- Font Awesome -->
            <input type="password" placeholder="Password" id="pass" style="width:auto;height: auto;margin-top: 10px;">
        </div>
        <button onclick="login()" style="margin-top: 35px; width: 100px;;height: 30px;">登录</button>
    </div>
    <script type="text/javascript">
        function login() {
            let username = document.getElementById("name").value;
            let password = document.getElementById("pass").value;
            let uName = Math.floor(Math.sqrt(2) / 2);
            let pCode = Math.ceil(Math.sqrt(2));
            console.log(uName)
            console.log(pCode)
            if (username == uName.toString() && password == pCode.toString()) {
                //alert("登录成功");
                window.location = "__index.html";
                return false;
            }
            else {
                alert("账号或密码错误");
                window.location = "index.html";
                return false;
            }
        }
    </script>

</body>

</html>

__EOF__

本文作者：艾孜尔江
本文链接：https://www.cnblogs.com/ezhar/p/15115472.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！