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>
相关文章：
web前端第三次作业
题目 本期作业 WEB第三次作业 请使用JS实一个网页中登录窗口的显示/隐藏，页面中拖动移动，并且添加了边界判断的网页效 代码图片 效果展示 代码 <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8&qu…...
【Pandas】pandas Series align
Pandas2.2 Series Computations descriptive stats 方法描述Series.align(other[, join, axis, level, …])用于将两个 Series 对齐，使其具有相同的索引 pandas.Series.align pandas.Series.align() 方法用于将两个 Series 对齐，使其具有相同的索引。…...
DeepSeek-V3网络模型架构图解
DeepSeek-V3网络架构的创新主要在两次，分别是在前馈层的MOE（混合专家模型）和在注意力中的MHA（多头潜在注意力，一种注意力计算规模压缩技术）。 MOE（混合专家模型） 回顾最初的MOE GS…...
Linux系统管理小课堂
1. 文件系统：你的数字房间大扫除 例子1：藏日记本的保险箱 chmod 700 my_diary.txt 👻 解释：把日记文件权限改成「只有主人能读写」，室友偷看时系统会翻白眼：“Permission denied！” 例子2&…...
明远智睿核心板在智能家居与工业网关中的应用实践
**——从硬件支持到场景落地的技术路径** SSD2351 在智能家居与工业物联网领域，设备需具备实时响应、多协议兼容及边缘计算能力。明远智睿新款核心板凭借其硬件特性，可高效支撑以下典型场景： #### **场景一：智能家居中枢网关**…...
Windows 系统 GDAL库 配置到 Qt 上
在地理信息开发中广泛使用的开源库，GDAL(Geospatial Data Abstraction Library）)库提供了读取和处理各种地理空间数据格式的能力。 准备阶段 下载 GDAL 库：前往 GDAL 的官方网站（https://www.gisinternals.com/）下载…...
部署onlyoffice后，php版的callback及小魔改（logo和关于）
作为这篇博文的补充CentOS9 安装Docker+Dpanel+onlyoffice（https、更改字体、字号、去除限制）的避坑笔记，现在继续… 本次主要内容有：php中callback的调用、自签证书调用callback遇到SSL certificate problem: unable to get local issuer certificate问题、修改onlyoffic…...
《qt open3d网格拉普拉斯平滑》
qt open3d网格拉普拉斯平滑 效果展示二、流程三、代码效果展示 二、流程 创建动作，链接到槽函数，并把动作放置菜单栏 参照前文 三、代码 1、槽函数实现 void on_actionFilterLaplacian_triggered();void MainWindow::on_actionFil...
【愚公系列】《Python网络爬虫从入门到精通》004-请求模块urllib3
标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主&…...
网络安全技术复习总结
1|0第一章 概论 1.网络安全发展阶段包括四个阶段：通信安全、计算机安全、网络安全、网络空间安全。 2.2017年6月1日，我国第一部全面规范网络空间安全的基础性法律《中华人民共和国网络安全法》正式实施。 3.2021年 6月10日，《中华人民共和…...
初阶c语言（while循环二分法）
前言： 作业和那个不是一个级别的 内容： 3.在一个有序数组中查找具体的某个数字n。(讲解二分查找) 下标就是数组的下标，从0开始，有点难度，我头有点晕，就是大概知道了，写代码也写不出来的那种…...
如何使用Java语言在Idea和Android中分别建立服务端和客户端实现局域网聊天
手把手教你用Java语言在Idea和Android中分别建立服务端和客户端实现局域网聊天 目录 文章目录 手把手教你用**Java**语言在**Idea**和**Android**中分别建立**服务端**和**客户端**实现局域网聊天**目录**[toc]**基本实现****问题分析****服务端**Idea:结构预览Server类代码解…...
Java_多线程
并发和并行 并发 在同一时刻，有多个指令在单个CPU上交替执行 并行 在同一时刻，有多个指令在多个CPU上同时执行 多线程的实现方式 继承Thread类的方式 注意给线程设置名字，启动线程等操作 实现Runable的方式 自己创建一个类然后去实现…...
uniapp开发h5部署到服务器
1.发行>网站-PC Web或手机H5（仅适用于uniapp） 2.填写网站域名 3.编译成功后会生成一个unpackage文件夹找到下面的h5 4.接下来会使用一个工具把h5里面的文件放到服务器上面（WinSCP使用其他能部署的工具也行） 5.登录 6.登录成功后…...
如何在个人电脑本地化部署Deepseek-R1大模型
文章目录 Deepseek概述公司简介DeepSeek模型优势DeepSeek模型发展历史Ollama安装Deepseek版本选择Deepseek支持的客户端工具编程语言客户端库桌面客户端插件类其他工具客户端工具配置cherryStudio配置测试如何使用DeepSeek满血版什么是 DeepSeek R1 满血版？deepseek官方第三方…...
Java中关于JSON的基本使用
Java中关于JSON的基本使用 Java中可以操作json的类库jar有很多，网上一找一大片，每种封装的jar包有自己的方法，需要查阅资料使用，但无非就是json转对象，对象转json这些 Java中常见的json类jar包：Gson,Jackso…...
简化的动态稀疏视觉Transformer的PyTorch代码
存一串代码（简化的动态稀疏视觉Transformer的PyTorch代码） import torch import torch.nn as nn import torch.nn.functional as F class DynamicSparseAttention(nn.Module): def __init__(self, dim, num_heads8, dropout0.1): super().__init__()…...
PADS多层板减少层数
前提 PADS是硬件工程师必备的画图软件，相信很多朋友遇到过为降低成本把6层板改为4层，或8层改为6层的经历，正常是把不需要的两层上所有东西删掉，然后修改层设置，下面举例说明。 首先是将要删除的层上的数据全部删除&a…...
你需要提供管理员权限才能删除此文件夹解决方法
立即高级启动 windows10 搜索“设置”，然后“更新和安全””->“恢复”->“立即重新启动” windows11 搜索“设置”，然后“Windows更新”->“更新历史记录”->“恢复”->“立即重新启动” 疑难解答 点击“疑难解答” 高级选项 启…...
螺旋折线（蓝桥杯18G）
、 #include<iostream> using namespace std; typedef pair<int,int> Dot;//存储坐标 int dy[] { 0,1,0,-1 }; int dx[] { -1,0,1,0 }; int main() {int direction 0,x,y,dis 0;Dot pos make_pair(0,0);cin >> x >> y;for (int i 1;; i) {for (…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
无法与IP建立连接，未能下载VSCode服务器
如题，在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中，选择 环境 -> 常规 ，将其中的颜色主题改成深色 点击确定，更改完成...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案：创建非 roo…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...