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

web前端第三次作业

news 2026/2/8 23:12:47

题目

本期作业
WEB第三次作业
请使用JS实一个网页中登录窗口的显示/隐藏，页面中拖动移动，并且添加了边界判断的网页效

代码图片

效果展示

代码

<!DOCTYPE html>

<head>

<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>

<span>欢迎访问OPENLAB EDU</span>

</div>

<div>

</div>

</div>

</header>

</div>

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…...

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

【Pandas】pandas Series align

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

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

DeepSeek-V3网络模型架构图解

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

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

Linux系统管理小课堂

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

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

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

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

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

Windows 系统 GDAL库配置到 Qt 上

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

编程日记 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

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

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

网络安全技术复习总结

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

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

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

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

编程日记 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_多线程

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

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

uniapp开发h5部署到服务器

1.发行>网站-PC Web或手机H5（仅适用于uniapp） 2.填写网站域名 3.编译成功后会生成一个unpackage文件夹找到下面的h5 4.接下来会使用一个工具把h5里面的文件放到服务器上面（WinSCP使用其他能部署的工具也行） 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有很多，网上一找一大片，每种封装的jar包有自己的方法，需要查阅资料使用，但无非就是json转对象，对象转json这些 Java中常见的json类jar包：Gson,Jackso…...

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

简化的动态稀疏视觉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__()…...

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

PADS多层板减少层数

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

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

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

立即高级启动 windows10 搜索“设置”，然后“更新和安全””->“恢复”->“立即重新启动” windows11 搜索“设置”，然后“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

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。具体可参…...

编程新知 2025/8/23 5:51:08

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽，大家好，我是左手python！ Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库，用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一） 1. CSI-2层定义（CSI-2 Layer Definitions） 分层结构 ：CSI-2协议分为6层： 物理层（PHY Layer） ： 定义电气特性、时钟机制和传输介质（导线&#…...

编程新知 2026/1/23 12:18:20

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/23 3:55:49

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

数据库分批入库

今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2026/1/8 11:38:36

汇编常见指令

汇编常见指令一、数据传送指令指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2026/1/23 2:04:44

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...

编程新知 2025/12/14 17:38:21

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT，橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版【7色560页】职场可视化逻辑图高级数据分析PPT模版：职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2026/1/23 12:22:14

题目

代码图片

效果展示

代码

相关文章：