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>Document</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">
        <!-- 页头 -->
        <!-- <div class="header"></div> -->
        <!-- H5语义化标签，表示开发页头部分 -->
        <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>