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

web前端第三次作业

news 2025/10/14 10:22:23

题目

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

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2025/10/13 9:09:29

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...

编程新知 2025/10/11 13:14:32

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...

编程新知 2025/10/11 16:53:56

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/10/6 20:49:11

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/9/28 3:32:09

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

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

编程新知 2025/10/8 6:10:34

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言： 最近在做行为检测相关的模型，用的是时空图卷积网络（STGCN），但原有kinetic-400数据集数据质量较低，需要进行细粒度的标注，同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2025/10/11 18:58:58

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。基础操作不再赘述。打开 macOS 终端，开始 docker 安装mysql之旅第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/9/28 3:34:59

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。目录 …...

编程新知 2025/9/28 3:36:18

题目

代码图片

效果展示

代码

相关文章：