Html5实现登录

简单的实现登录功能,无后台.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

    <script>
        function a1() {
            var name = document.getElementById("name").value;

            if(name == 'admin'){
                $("#userInfo").css("color", "green");
                var x = "ok"
            }else {
                $("#userInfo").css("color", "red");
                var x = "username error"
            }
            $("#userInfo").html(x);
        }
        function a2() {
            var pwd = document.getElementById("pwd").value;

            if(pwd == '123456'){
                $("#pwdInfo").css("color", "green");
                var y = "ok"
            }else {
                $("#pwdInfo").css("color", "red");
                var y = "password error"
            }
            $("#pwdInfo").html(y);
        }
        function go(){
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            if(name == 'admin' && pwd =='123456'){
                location.href = 'https://www.cnblogs.com/sunqi-123456/';
            }else {
                alert("账号或者密码错误");
            }
        }
    </script>
    <style>
        body{
            text-align: center;
            position: relative;
            top: 50px;
        }
        .tx {
            text-align: center;
            border: 1px black solid;
            width: 70px;
            height: 30px;
        }
        .tx .ty{
            visibility: hidden;
            border: 1px black solid;
            width: 137px;
            height: 45px;
            color: #15c686;
            position: absolute;
            z-index: 1;
            top: 119px;
            left: 80px;
        }
        .tx:hover .ty{
            visibility: visible;
        }
    </style>
</head>
<body>
<p>
    账号:<input id="name" onblur="a1()" type="text" required/>
    <span id="userInfo"></span>
</p>
<p>
    密码:<input id="pwd" onblur="a2()" type="password" required/>
    <span id="pwdInfo"></span>
</p>

<button type="button" class="btn btn-primary" onclick="go()">登录</button>
<div class="tx">
    提示信息
    <span class="ty">username:admin <br>
                     password:123456
    </span>
</div>
</body>
</html>

 

posted @ 2022-04-14 13:37  ℒ歧  阅读(430)  评论(1)    收藏  举报