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

web前端第三次作业

news 2026/2/9 0:33:32

题目

本期作业
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

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

Objective-C常用命名规范总结

【OC】常用命名规范总结文章目录【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口目录第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...

编程新知 2026/2/5 1:30:05

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

【单片机期末】单片机系统设计

主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图一、题目要求二、绘制系统状态流图题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。三、利用定时器产生时…...

编程新知 2026/1/31 12:27:36

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群一、主从架构的不足与Dledger的定位主从架构缺陷数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

基于 TAPD 进行项目管理

起因自己写了个小工具，仓库用的Github。之前在用markdown进行需求管理，现在随着功能的增加，感觉有点难以管理了，所以用TAPD这个工具进行需求、Bug管理。操作流程注册 TAPD，需要提供一个企业名新建一个项目&#…...

编程新知 2026/1/24 14:15:44

使用LangGraph和LangSmith构建多智能体人工智能系统

现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。在这篇博客〔原作者&a…...

编程新知 2026/1/26 13:48:59

云原生安全实战：API网关Kong的鉴权与限流详解

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...

编程新知 2026/2/1 6:24:16

题目

代码图片

效果展示

代码

相关文章：