当前位置： 首页 > news >正文

web前端第三次作业

news 2026/2/9 4:22:32

题目

本期作业
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实一个网页中登录窗口的显示/隐藏&#xff0c;页面中拖动移动&#xff0c;并且添加了边界判断的网页效 代码图片 效果展示 代码 <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8&qu…...

编程日记 2025/2/13 10:30:17

【Pandas】pandas Series align

Pandas2.2 Series Computations descriptive stats 方法描述Series.align(other[, join, axis, level, …])用于将两个 Series 对齐&#xff0c;使其具有相同的索引 pandas.Series.align pandas.Series.align() 方法用于将两个 Series 对齐&#xff0c;使其具有相同的索引。…...

编程日记 2025/2/13 10:29:16

DeepSeek-V3网络模型架构图解

DeepSeek-V3网络架构的创新主要在两次&#xff0c;分别是在前馈层的MOE&#xff08;混合专家模型&#xff09;和在注意力中的MHA&#xff08;多头潜在注意力&#xff0c;一种注意力计算规模压缩技术&#xff09;。 MOE&#xff08;混合专家模型&#xff09; 回顾最初的MOE GS…...

编程日记 2025/2/13 10:26:11

Linux系统管理小课堂

1. 文件系统&#xff1a;你的数字房间大扫除 例子1&#xff1a;藏日记本的保险箱 chmod 700 my_diary.txt &#x1f47b; 解释&#xff1a;把日记文件权限改成「只有主人能读写」&#xff0c;室友偷看时系统会翻白眼&#xff1a;“Permission denied&#xff01;” 例子2&…...

编程日记 2025/2/13 10:25:10

明远智睿核心板在智能家居与工业网关中的应用实践

**——从硬件支持到场景落地的技术路径** SSD2351 在智能家居与工业物联网领域&#xff0c;设备需具备实时响应、多协议兼容及边缘计算能力。明远智睿新款核心板凭借其硬件特性&#xff0c;可高效支撑以下典型场景&#xff1a; #### **场景一&#xff1a;智能家居中枢网关**…...

编程日记 2025/2/13 10:24:09

Windows 系统 GDAL库 配置到 Qt 上

在地理信息开发中广泛使用的开源库&#xff0c;GDAL(Geospatial Data Abstraction Library&#xff09;)库提供了读取和处理各种地理空间数据格式的能力。 准备阶段 下载 GDAL 库&#xff1a;前往 GDAL 的官方网站&#xff08;https://www.gisinternals.com/&#xff09;下载…...

编程日记 2025/2/13 10:23:07

部署onlyoffice后，php版的callback及小魔改（logo和关于）

作为这篇博文的补充CentOS9 安装Docker+Dpanel+onlyoffice（https、更改字体、字号、去除限制）的避坑笔记，现在继续… 本次主要内容有：php中callback的调用、自签证书调用callback遇到SSL certificate problem: unable to get local issuer certificate问题、修改onlyoffic…...

编程日记 2025/2/13 10:21:05

《qt open3d网格拉普拉斯平滑》

qt open3d网格拉普拉斯平滑 效果展示二、流程三、代码效果展示 二、流程 创建动作，链接到槽函数，并把动作放置菜单栏 参照前文 三、代码 1、槽函数实现 void on_actionFilterLaplacian_triggered();void MainWindow::on_actionFil...

编程日记 2025/2/13 10:18:59

【愚公系列】《Python网络爬虫从入门到精通》004-请求模块urllib3

标题详情作者简介愚公搬代码头衔华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xff0c;阿里云签约作者&#xff0c;腾讯云优秀博主&…...

编程日记 2025/2/13 10:11:46

网络安全技术复习总结

1|0第一章 概论 1.网络安全发展阶段包括四个阶段&#xff1a;通信安全、计算机安全、网络安全、网络空间安全。 2.2017年6月1日&#xff0c;我国第一部全面规范网络空间安全的基础性法律《中华人民共和国网络安全法》正式实施。 3.2021年 6月10日&#xff0c;《中华人民共和…...

编程日记 2025/2/13 10:10:44

初阶c语言（while循环二分法）

前言&#xff1a; 作业和那个不是一个级别的 内容&#xff1a; 3.在一个有序数组中查找具体的某个数字n。(讲解二分查找) 下标就是数组的下标&#xff0c;从0开始&#xff0c;有点难度&#xff0c;我头有点晕&#xff0c;就是大概知道了&#xff0c;写代码也写不出来的那种…...

编程日记 2025/2/13 10:09:41

如何使用Java语言在Idea和Android中分别建立服务端和客户端实现局域网聊天

手把手教你用Java语言在Idea和Android中分别建立服务端和客户端实现局域网聊天 目录 文章目录 手把手教你用**Java**语言在**Idea**和**Android**中分别建立**服务端**和**客户端**实现局域网聊天**目录**[toc]**基本实现****问题分析****服务端**Idea:结构预览Server类代码解…...

编程日记 2025/2/13 10:07:38

Java_多线程

并发和并行 并发 在同一时刻&#xff0c;有多个指令在单个CPU上交替执行 并行 在同一时刻&#xff0c;有多个指令在多个CPU上同时执行 多线程的实现方式 继承Thread类的方式 注意给线程设置名字&#xff0c;启动线程等操作 实现Runable的方式 自己创建一个类然后去实现…...

编程日记 2025/2/13 10:06:36

uniapp开发h5部署到服务器

1.发行>网站-PC Web或手机H5&#xff08;仅适用于uniapp&#xff09; 2.填写网站域名 3.编译成功后会生成一个unpackage文件夹找到下面的h5 4.接下来会使用一个工具把h5里面的文件放到服务器上面&#xff08;WinSCP使用其他能部署的工具也行&#xff09; 5.登录 6.登录成功后…...

编程日记 2025/2/13 10:03:32

如何在个人电脑本地化部署Deepseek-R1大模型

文章目录 Deepseek概述公司简介DeepSeek模型优势DeepSeek模型发展历史Ollama安装Deepseek版本选择Deepseek支持的客户端工具编程语言客户端库桌面客户端插件类其他工具客户端工具配置cherryStudio配置测试如何使用DeepSeek满血版什么是 DeepSeek R1 满血版？deepseek官方第三方…...

编程日记 2025/2/13 10:02:25

Java中关于JSON的基本使用

Java中关于JSON的基本使用 Java中可以操作json的类库jar有很多&#xff0c;网上一找一大片&#xff0c;每种封装的jar包有自己的方法&#xff0c;需要查阅资料使用&#xff0c;但无非就是json转对象&#xff0c;对象转json这些 Java中常见的json类jar包&#xff1a;Gson,Jackso…...

编程日记 2025/2/13 9:59:21

简化的动态稀疏视觉Transformer的PyTorch代码

存一串代码&#xff08;简化的动态稀疏视觉Transformer的PyTorch代码&#xff09; 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__()…...

编程日记 2025/2/13 9:44:04

PADS多层板减少层数

前提 PADS是硬件工程师必备的画图软件&#xff0c;相信很多朋友遇到过为降低成本把6层板改为4层&#xff0c;或8层改为6层的经历&#xff0c;正常是把不需要的两层上所有东西删掉&#xff0c;然后修改层设置&#xff0c;下面举例说明。 首先是将要删除的层上的数据全部删除&a…...

编程日记 2025/2/13 9:39:59

你需要提供管理员权限才能删除此文件夹解决方法

立即高级启动 windows10 搜索“设置”&#xff0c;然后“更新和安全””->“恢复”->“立即重新启动” windows11 搜索“设置”&#xff0c;然后“Windows更新”->“更新历史记录”->“恢复”->“立即重新启动” 疑难解答 点击“疑难解答” 高级选项 启…...

编程日记 2025/2/13 9:38:57

螺旋折线（蓝桥杯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 (…...

编程日记 2025/2/13 9:37:56

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2026/2/8 4:37:39

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2026/2/8 20:42:53

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2026/2/8 20:41:53

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2026/2/1 20:49:03

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/2/7 17:33:19

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2026/2/4 17:18:03