web前端第三次作业
题目
本期作业
WEB第三次作业
请使用JS实一个网页中登录窗口的显示/隐藏，页面中拖动移动，并且添加了边界判断的网页效
代码图片
效果展示
代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;padding: 0;box-sizing: border-box;}
html,body{width: 100%;height: 100%;}
.container{width: 100%;height: 100%;background-color: #f2f1f2f2;}
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-last-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>
<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.οnclick=function() {
_login_box.style.display ="block";
}
let _close=document.getElementById("close");
_close.οnclick=function( ){
_login_box.style.display="none";
}
let _header=document.getElementById("header");
document.οnmοusedοwn= function(event){
let offsetX =event.offsetX;
let offsetY =event.offsetY;
_header.οnmοusemοve=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.οnmοuseup=function(){
_header.οnmοusemοve=null;
}
</script>
</body>
</html>