作业要求
请使用JS实一个网页中登录窗口的显示/隐藏，页面中拖动移动，并且添加了边界判断的网页效果
作业内容
代码内容
<!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>
实现效果
