web第三次作业

作业要求

请使用JS实一个网页中登录窗口的显示/隐藏，页面中拖动移动，并且添加了边界判断的网页效果
作业内容

代码内容

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录窗口拖动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
            background-color: #f2f1f2;
        }

        header {
            width: 1200px;
            height: 50px;
            background-color: #fff;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header div:nth-of-type(2) {
            display: flex;
            gap: 20px;
            cursor: pointer;
        }

        header div:nth-of-type(2)span:hover {
            font-weight: bolder;
            color: red;
        }

        .login-box {
            display: none;
            overflow: hidden;
            width: 300px;
            height: 200px;
            background-color: #fff;
            border: solid 1px orangered;
            border-radius: 8px;
            box-shadow: rgba(255, 0, 0, 0.5) 5px 5px 5px;
            position: absolute;
            left: 1150px;
            top: 50px;
        }

        .login-box .header {
            height: 40px;
            background-color: orangered;
            display: flex;

            justify-content: space-between;
            align-items: center;
            color: white;
            cursor: pointer;
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div>
                <span>欢迎访问OPENLAB EDU</span>
            </div>
            <div>
                <span id="login">登录</span>
                <span id="register">注册</span>
            </div>
            <div class="login-box" id="login-box">
                <div class="header" id="header">
                    <span>会员登录</span>
                    <span id="close">[关闭]</span>
                </div>
            </div>
        </header>
    </div>
    <script>
        // 获取登录按钮
        let _login = document.getElementById("login");
        let _login_box = document.getElementById("login-box");
        // 登录按钮添加事件
        _login.onclick = function () {
            // 显示弹窗
            _login_box.style.display = "block";
        }

        // 获取关闭按钮
        let _close = document.getElementById("close");
        _close.onclick = function () {
            // 隐藏弹窗
            _login_box.style.display = "none";
        }

        // 获取登录窗口标题
        let _header = document.getElementById("header");

        // 文档中添加鼠标按下事件
        document.onmousedown = function (event) {
            // 获取鼠标指针在标题上的偏移量(事件函数默认参数：事件对象)
            let offsetX = event.offsetX;
            let offsetY = event.offsetY;

            // 给窗口标题，添加鼠标移动的事件
            _header.onmousemove = function (event2) {
                // 鼠标移动，获取新的坐标
                let mouseX = event2.clientX;
                let mouseY = event2.clientY;

                // 计算登录窗口坐标
                let loginX = mouseX - offsetX;
                let loginY = mouseY - offsetY;

                // ----------------- 边界判断
                // 左边界
                if (loginX <= 0) {
                    loginX = 0;
                }
                // 上边界
                if (loginY <= 0) {
                    loginY = 0;
                }
                // 右边界
                let iw = window.innerWidth; // 浏览器窗口宽度
                let lw = getComputedStyle(_login_box).width; // 登录窗宽度
                lw = parseInt(lw); // 转换数据类型
                if (loginX >= (iw - lw)) {
                    loginX = iw - lw;
                }
                // 下边界
                let ih = window.innerHeight;
                let lh = getComputedStyle(_login_box).height; // 登录窗高度
                lh = parseInt(lh); // 转换数据类型
                if (loginY >= (ih - lh)) {
                    loginY = ih - lh;
                }

                // 给登录窗口设置样式
                _login_box.style.left = loginX + "px";
                _login_box.style.top = loginY + "px";

            }

        }

        // 鼠标按键抬起事件：什么都不做
        document.onmouseup = function () {
            // 清除了标题上的鼠标移动事件 - 什么都不做
            _header.onmousemove = null;

        }

    </script>
</body>

</html>
web第三次作业

作业要求

作业内容

代码内容

实现效果
