web第三次作业

一、要实现的内容：利用JS实一个网页中登录窗口的表现/隐蔽，页面中拖动移动，而且添加了界限判断的网页结果
二、代码展示

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.     <title>Document</title>
7.     <style>
8.         *{
9.             margin: 0;
10.             padding: 0;
11.             box-sizing: border-box;
12.         }
13.         html, body{
14.             width: 100%;
15.             height: 100%;
16.         }
17.         .container{
18.             width:100%;
19.             height:100%;
20.             background-color:#f2f1f2;
21.         }
22.         header{
23.             width:1200px;
24.             height: 50px;
25.             background-color: #fff;
26.             margin: 0 auto;
27.             display: flex;
28.             justify-content: space-between;
29.             align-items: center;
30.         }
31.         header div:nth-of-type(2){
32.             display: flex;
33.             gap:20px;
34.             cursor: pointer;
35.         }
36.         header div:nth-of-type(2) span:hover{
37.             font-weight:bolder;
38.             color:red;
39.         }
40.         .login-box{
41.             display:none;
42.             overflow: hidden;
43.             width:300px;
44.             height: 200px;
45.             background-color:#fff;
46.             border:solid 1px orangered;
47.             border-radius:8px;
48.             box-shadow: rgba(255,0,0,0.5) 5px 5px 5px;
49.             position: absolute;
50.             left: 1150px;
51.             top: 50px;
52.         }
53.         .login-box .header{
54.             height:40px;
55.             background-color: orangered;
57.             display:flex;
58.             justify-content: space-between;
59.             align-items: center;
60.             color:white;
61.             cursor: pointer;
62.             padding:0 10px;
63.         }
64.     </style>
65. </head>
66. <body>
67.     <div class="container">
68.         <!-- 页头 -->
69.         <!-- <div class="header"></div> -->
70.         <!-- H5语义化标签，表示开发页头部分 -->
71.         <header>
72.             <div>
73.                 <span>欢迎访问OPENLAB EDU</span>
74.             </div>
75.             <div>
76.                 <span id="login">登录</span>
77.                 <span id="register">注册</span>
78.                
79.             </div>
80.             <!-- 登录框 -->
81.             <div class="login-box" id="login-box">
82.                 <div class="header" id="header">
83.                     <span>会员登录</span>
84.                     <span id="close">[关闭]</span>
85.                 </div>
86.             </div>
87.         </header>
88.     </div>
90.     <script>
91.         // 获取登录按钮
92.         let _login = document.getElementById("login");
93.         let _login_box = document.getElementById("login-box");
94.         // 登录按钮添加事件
95.         _login.onclick = function() {
96.             // 显示弹窗
97.             _login_box.style.display = "block";
98.         }
100.         // 获取关闭按钮
101.         let _close = document.getElementById("close");
102.         _close.onclick = function() {
103.             // 隐藏弹窗
104.             _login_box.style.display = "none";
105.         }
107.         // -------------------------------------------
108.         // 获取登录窗口标题
109.         let _header = document.getElementById("header");
111.         // 文档中添加鼠标按下事件
112.         document.onmousedown = function(event) {
113.             // 获取鼠标指针在标题上的偏移量(事件函数默认参数：事件对象)
114.             let offsetX = event.offsetX;
115.             let offsetY = event.offsetY;
117.             // 给窗口标题，添加鼠标移动的事件
118.             _header.onmousemove = function(event2) {
119.                 // 鼠标移动，获取新的坐标
120.                 let mouseX = event2.clientX;
121.                 let mouseY = event2.clientY;
123.                 // 计算登录窗口坐标
124.                 let loginX = mouseX - offsetX;
125.                 let loginY = mouseY - offsetY;
127.                 // ----------------- 边界判断
128.                 // 左边界
129.                 if(loginX <= 0) {
130.                     loginX = 0;
131.                 }
132.                 // 上边界
133.                 if(loginY <=0) {
134.                     loginY = 0;
135.                 }
136.                 // 右边界
137.                 let iw = window.innerWidth; // 浏览器窗口宽度
138.                 let lw = getComputedStyle(_login_box).width; // 登录窗宽度
139.                 lw = parseInt(lw); // 转换数据类型
140.                 if(loginX >= (iw - lw)){
141.                     loginX = iw - lw;
142.                 }
144.                 // 下边界
145.                 let ih = window.innerHeight;
146.                 let lh = getComputedStyle(_login_box).height; // 登录窗高度
147.                 lh = parseInt(lh); // 转换数据类型
148.                 if(loginY >= (ih - lh)){
149.                     loginY = ih - lh;
150.                 }
152.                 // 给登录窗口设置样式
153.                 _login_box.style.left = loginX + "px";
154.                 _login_box.style.top = loginY + "px";
155.             }
156.         }
158.         // 鼠标按键抬起事件：什么都不做
159.         document.onmouseup = function() {
160.             // 清除了标题上的鼠标移动事件 - 什么都不做
161.             _header.onmousemove = null;
162.         }
163.     </script>
164. </body>
165. </html>

复制代码