b615de4

分支 (1)

提交

管理

管理

master

b615de4

blog
/
blog
/
target
/
blog
/
blogClient
/
HTML
/
02-loginold2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎登录</title>
    <link rel="stylesheet" href="../CSS/comment.css">
    <link rel="stylesheet" href="../CSS/enroll.css">

</head>
<body style=" background-image: linear-gradient(to right,rgb(67 142 189),rgb(35 192 209 / 81%)); ;">

    <!-- <div class="nav" style="background-image: linear-gradient(to right,#0ba659,#0670a1);;">

        <img src="../img/白天模式.png" alt="加载失败">

    <span>欢迎注册Blog</span>

    <div class="spacer">  占位   </div>
     <a href="03-enroll.html">版本号</a>
     </div>  -->

    <div class="outer">
        <div class="inner">
            <div class="right">
                <h1>登录</h1>
                <div style="height:40px"></div>
                <div class="enr">
                    <form action="../../login" method="post">
                        <input type="text" name="username" id="username" class="input" placeholder="请输入用户名">
                        <input type="password" name="password" id="password1" class="input" placeholder="请输入密码">
                        <input type="submit" name="submit" id="submit" class="submit" value="登录">
                        <p id="hint" class="hint"></p>
                    </form>
                </div>
            </div>
            <div class="left">
                <!-- <img src="../img/logo.png" alt="加载错误"> -->
                <h1>没有账户?</h1>
                <h4>快使用QQ邮箱注册一个账户体验吧</h4>
                <div class="but"><button>注册</button></div>
                <div style="height:110px;"></div>
                <h6 id="headline">江南之地，乌瓦白墙，烟雨落于深巷</h6>
                <p id="hint1"></p>
            </div>
        </div>
    </div>
    <h6>
        版本号1.1.1
    </h6>
    <h6>
        那是雨季刚过，云从四面八方升起来。天顶上闪过一缕缕阳光。我们有各种选择，可以到各个方向去。所以那天我在路口上站了很久。
    </h6>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        // 点击登录进行跳转
        let enroll = document.querySelector(".but");
        enroll.onclick = function() {
        // 点击登录跳转到login
            location.assign('03-enroll.html');
        }

        let username = document.querySelector("#username");
        let password = document.querySelector("#password1");
        let login = document.querySelector("#submit");

        login.onmouseover = function() {
            if (username.value == ""){
                let hint = "<div class='hint'>用户名不能为空</div>"
                document.getElementById("hint").innerHTML = hint;
            }

            if (password.value == ""){
                let hint = "<div class='hint'>密码不能为空</div>"
                document.getElementById("hint").innerHTML = hint;
            }

        }
        //鼠标移出事件
        login.onmouseout = function() {
            let hint = "<div class='hint'></div>"
            document.getElementById("hint").innerHTML = hint;
        }

        // 文案
        let headline = document.querySelector("#headline");
        headline.onmouseover = function() {
            let hint = "<div class='hint1'>东方欲晓，莫道君行早。踏遍青山人未老，风景这边独好</div>"
            document.getElementById("hint1").innerHTML = hint;
        }
        //鼠标移出事件
        headline.onmouseout = function() {
            let hint = "<div class='hint1'></div>"
            document.getElementById("hint1").innerHTML = hint;
        }
    </script>

</body>
</html>