web前端HTMLcss JavaScript

登录界面文件命名 login.html
HTML框架css美化JavaScript进行校验
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            background: #0fc4ca;
        }

        h1 {
            color: #FFF;
            text-align: center;
        }

        .container {
            margin: 100px auto;
            width: 30%;
        }

        form {
            background: #FFF;
            height: 330px;
            width: 100%;
            border-radius: 10px;
            position: relative;
        }

        label {
            color: #000;
            font-weight: bold;
            font-size: 20px;
            margin-left: 40px;
        }

        input {
            text-align: left;
            margin: 10px;
        }

        .input {
            width: 80%;
            height: 35px;
            margin-left: 40px;
        }

        .checkbox {
            margin-left: 30px;
        }

        a {
            text-decoration: none;
            font-weight: bold;
        }

        .submit {
            display: inline-block;
            margin-top: 0;
            margin-left: 145px;
            background: #000;
            border: none;
            color: #FFF;
            height: 35px;
            width: 100px;
            text-align: center;
            font-weight: bold;
            border-radius: 5px;
        }

        .left {
            margin: 20px;
        }

        .right {
            position: absolute;
            right: 20px;
        }

        .btn {
            width: 180px;
            height: 35px;
            letter-spacing: 3px;
            background-color: aqua;
            border-radius: 5px;
            border-color: transparent;
            font-size: 16px;
            color: #fff;
            box-shadow: inset 0 -4px 2px 0 rgb(0, 0, 0, 0.2);
            margin-right: 1px;
            cursor: pointer;
        }
    </style>
    
   <script>
        function checkuserpwd() {
    var username = document.getElementById("uname").value;
    var userpwd = document.getElementById("upwd").value;

    if (username == "g" && userpwd == "123") {
        alert("登陆成功!");
        setInterval(function () {
            location.href = "index.html";
        }, 1000);
        return true;
    }
    else {
        alert("用户名或密码有误，登陆失败1");
        return false;
    }
}

function resetuserpwd()
{
    document.getElementById("uname").value="";
    document.getElementById("upwd").value="";
}
    </script>
</head>

<body>
    <div class="container">
        <h1>用户登录</h1>
        <form>
            <br>
            <label for="username">用户名</label><br>
            <input type="text" name="username" id="uname" class="input" value="" placeholder="用户名admin"><br>
            <label for="pwd">密码</label><br>
            <input type="password" name="" id="upwd" class="input" value="" placeholder="密码admin">
            <div class="checkbox">
                <input type="checkbox" name="">
                <span>记住密码</span>
            </div>
            <div class="checkbox">
                <input type="reset" name="submit2" value="重置" class="btn" onclick="resetuserpwd()">
                <button class="btn " type="button" onclick="checkuserpwd()">开始登录</button>
            </div>
            <br>
            <a href="#" class="left">返回首页</a>
            <a href="table01.html" class="right">注册账号</a>
        </form>
    </div>
</body>

</html>
web前端HTMLcss JavaScript

猜你喜欢
