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 (…...
Elasticsearch管理利器：es-client全方位指南与实战技巧
Elasticsearch管理利器：es-client全方位指南与实战技巧 【免费下载链接】es-client elasticsearch客户端，issue请前往码云：https://gitee.com/qiaoshengda/es-client 项目地址: https://gitcode.com/gh_mirrors/es/es-client 你是否曾…...
双系统‘分手’指南：在UEFI模式下彻底卸载Ubuntu并回收磁盘空间（附EasyUEFI使用详解）
双系统卸载全攻略：安全移除Ubuntu并回收磁盘空间的终极指南 你是否曾经为了体验Linux而在Windows电脑上安装了Ubuntu双系统，现在却想回归单一操作系统？面对复杂的UEFI引导和磁盘分区，很多人担心操作不当会导致系统崩溃或数据丢失。…...
深度探索JD-GUI：Java字节码逆向工程与代码解析实战剖析
深度探索JD-GUI：Java字节码逆向工程与代码解析实战剖析 【免费下载链接】jd-gui A standalone Java Decompiler GUI 项目地址: https://gitcode.com/gh_mirrors/jd/jd-gui 在Java开发与逆向工程领域，Java反编译、字节码分析、代码逆向已成为开发者…...
Windows安卓应用安装器：快速轻量级解决方案终极指南
Windows安卓应用安装器：快速轻量级解决方案终极指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 想在Windows电脑上轻松安装安卓应用吗？厌倦…...
从图形变换到机器学习：行列式到底在‘衡量’什么？一个直观的几何理解指南
从图形变换到机器学习：行列式到底在‘衡量’什么？一个直观的几何理解指南 想象你手中有一张弹性薄膜，拉伸、旋转或挤压它时，薄膜覆盖的面积会如何变化？这种直观的几何变换背后，隐藏着线性代数中行列式的本质…...
FABRK全栈框架：模块化设计与AI辅助开发实战解析
1. 项目概述：一个为AI时代而生的全栈开发框架如果你和我一样，在过去几年里反复搭建过各种SaaS应用、管理后台或者数据看板，你一定会对那种重复劳动感到厌倦。每次新项目启动，都要重新配置身份验证、集成支付、设计仪表盘组件、处理…...
qmcdump：3步轻松解锁QQ音乐加密文件，实现跨设备音乐自由
qmcdump：3步轻松解锁QQ音乐加密文件，实现跨设备音乐自由 【免费下载链接】qmcdump 一个简单的QQ音乐解码（qmcflac/qmc0/qmc3 转 flac/mp3），仅为个人学习参考用。 项目地址: https://gitcode.com/gh_mirrors/qm/qmcdu…...
将串口打印的日志，同时备份到sd卡里
将串口打印的日志，同时备份到sd卡里#include <stdio.h> #include <unistd.h> #include <pthread.h> #include <string.h> #include <stdlib.h> #include <errno.h>static int pipe_fd[2] {-1, -1};static int stdout_backup …...
Python ORM实战：SQLAlchemy深度解析
Python ORM实战：SQLAlchemy深度解析 引言 在Python后端开发中，ORM（对象关系映射）是连接应用程序和数据库的重要桥梁。作为一名从Rust转向Python的后端开发者，我深刻体会到SQLAlchemy在处理数据库操作方面的强大能力。S…...
移动端优化awesome-stock-resources：响应式素材适配终极指南
移动端优化awesome-stock-resources：响应式素材适配终极指南 【免费下载链接】awesome-stock-resources :city_sunrise: A collection of links for free stock photography, video and Illustration websites 项目地址: https://gitcode.com/gh_mirrors/aw/aweso…...