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

本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询

news 2026/2/9 3:33:22

本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询

  • 1 跟随鼠标的天使
  • 2 模拟京东按键输入内容
  • 3 模拟京东快递单号查询

1 跟随鼠标的天使

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跟随鼠标的天使</title><style>img {position: absolute;}</style>
</head>
<body><img src="images/angel.gif" alt=""><script>/* 案例分析：1.鼠标不断的移动，使用鼠标移动事件： mousemove2.在页面中移动，给document注册事件3.图片要移动距离，而且不占位置，我们使用绝对定位即可4.核心原理:每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片 */var pic = document.querySelector('img');// mousemove 只要我们鼠标移动1px 就会触发这个事件document.addEventListener('mousemove',function(e) {var x = e.pageX;var y = e.pageY;// 此时鼠标在图片左上角// pic.style.left = x + 'px'; // ！！！！千万不要忘记给left和top加字符串px单位 ！！！！// pic.style.top = y + 'px';// 要想鼠标在图片正中间// 50 40为图片大小的一半pic.style.left = x - 50 + 'px';pic.style.top = y - 40 + 'px';});</script>
</body>
</html>

在这里插入图片描述

2 模拟京东按键输入内容

  • 当我们按下s键，光标就定位到搜索键
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模拟京东按键输入内容</title>
</head>
<body><input type="text"><script>/* 案例分析：1.核心思路：检测用户是否按下了s键，如果按下了s键，就把光标定位到搜索框里面2.使用键盘事件对象里面的keyCode判断用户按下的是否是s键3.搜索框获得焦点：使用js里面的focus()方法 */var search = document.querySelector('input');// 如果使用keydown 不仅会使光标定位到搜索框 还会打印出s// 所以使用keyup 只会将光标定位到搜索框 不会打印document.addEventListener('keyup',function(e) {if (e.key == 's' || e.key == 'S') {search.focus();}});</script>
</body>
</html>

在这里插入图片描述

3 模拟京东快递单号查询

  • 要求：当我们在文本框输入内容时，文本框上面自动显示大字号的内容。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模拟京东快递单号查询</title><style>* {margin: 0;padding: 0;}.search {position: relative;width: 178px;margin: 100px;}.con {display: none;  /*隐藏元素 */position: absolute;top: -40px;width: 171px;border: 1px solid rgba(0, 0, 0, .2);box-shadow: 0 2px 4px rgba(0, 0, 0, .2); /* box-shadow 属性向框添加一个或多个阴影 */padding: 5px 0;font-size: 18px;line-height: 20px;color: #333;}.con::before {content: '';width: 0;height: 0;position: absolute;top: 28px;left: 18px;border: 8px solid #000;border-style: solid dashed dashed;border-color: #fff transparent transparent;}</style>
</head>
<body><div class="search"><div class="con">123</div><input type="text" placeholder="请输入您的快递单号" class="jd"></div><script>/* 案例分析：1.快递单号输入内容时，上面的大号字体盒子(con)显示(这里面的字号更大)2.表单检测用户输入：给表单添加键盘事件3.同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText / innerHTML)作为内容4.如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子5.注意：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中6.keyup事件触发的时候，文字已经落入文本框里面了7.当我们失去焦点，就隐藏这个con盒子8.当我们获得焦点，并且文本框内容不为空，就显示这个con盒子 */var con = document.querySelector('.con');var jd_input = document.querySelector('.jd');jd_input.addEventListener('keyup',function(e) {if (this.value == '') {con.style.display = 'none';} else {con.style.display = 'block';con.innerText = this.value;}})// 当我们失去焦点，就隐藏这个con盒子jd_input.addEventListener('blur',function(e) {con.style.display = 'none';})// 当我们获得焦点，就显示这个con盒子jd_input.addEventListener('focus',function(e) {if(this.value !== '') {con.style.display = 'block';}})</script>
</body>
</html>

得到焦点但没有输入内容时：
在这里插入图片描述
得到焦点且输入内容后：
在这里插入图片描述
失去焦点时：
在这里插入图片描述

相关文章：

本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询

本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询1 跟随鼠标的天使2 模拟京东按键输入内容3 模拟京东快递单号查询1 跟随鼠标的天使 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><met…...

编程日记 2023/5/30 9:01:42

ChatGPT 被大面积封号，到底发生什么了？

意大利数据保护机表示 OpenAI 公司不但非法收集大量意大利用户个人数据&#xff0c;没有设立检查 ChatGPT 用户年龄的机制。 ChatGPT 似乎正在遭遇一场滑铁卢。 3月31日&#xff0c; 大量用户在社交平台吐槽&#xff0c;自己花钱开通的 ChatGPT 账户已经无法登录&#xff0c;更…...

编程日记 2023/5/15 20:15:45

教你精通JavaSE语法之第十一章、认识异常

一、异常的概念与体系结构 1.1异常的概念 在Java中&#xff0c;将程序执行过程中发生的不正常行为称为异常。比如之前写代码时经常遇到的&#xff1a; 1.算术异常 System.out.println(10 / 0); // 执行结果 Exception in thread "main" java.lang.ArithmeticExcep…...

编程日记 2023/5/15 21:47:26

display、visibility、opacity隐藏元素的区别

display、visibility、opacity隐藏元素的区别 display: none 事件监听&#xff1a;无法进行DOM事件监听。 元素从网页中消失&#xff0c;并且不占据位置再次从网页中出现会引起重排 进而引起重绘继承&#xff1a;不会被子元素继承&#xff0c;因为子元素也不被渲染。 visib…...

编程日记 2023/5/22 15:21:23

Linux Shell 实现一键部署tomcat10+java13

tomcat 前言 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和调试JSP 程序的首选。对于一个初学者来说&#xff0c;可以这样认为&#xff0c;当…...

编程日记 2023/5/24 12:46:23

软硬皆施,WMS仓库管理系统+PDA,实现效率狂飙

人工经验Excel表格&#xff0c;是传统第三方仓储企业常用的管理模式。在这种管理模式下&#xff0c;对仓库员工的Excel操作能力、业务经验和工作素养要求极高。一旦员工的经验能力不足&#xff0c;就会导致仓库业务运行不顺畅&#xff0c;效率低下&#xff0c;而员工也会因长时…...

编程日记 2023/5/14 14:14:49

DJ3-2 传输层（第二节课）

目录 一、如何实现可靠数据传输 1. 需要解决地问题 2. 使用的描述方法 二、rdt1.0&#xff1a;完全可靠信道上的可靠数据传输 1. 前提条件 2. 有限状态机 FSM 三、rdt2.0&#xff1a;仅具有 bit 错误的信道上的可靠数据传输 1. 前提条件 2. 有限状态机 FSM 3. 停等协…...

编程日记 2023/5/17 16:53:07

FrIf-FrIf功能模块概述和与底层驱动的交互

总目录链接==>> AutoSAR入门和实战系列总目录 总目录链接==>> AutoSAR BSW高阶配置系列总目录 文章目录 1 FlexRay 接口模块概述2 与FlexRay底层驱动的交互1 FlexRay 接口模块概述 FlexRay 接口模块通过 FlexRay 驱动程序模块间接与 FlexRay 控制器通信。 它…...

编程日记 2023/5/17 14:21:39

【LeetCode】前 K 个高频元素（堆）

目录 1.题目要求&#xff1a; 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 2.解题思路&#xff1a; 代码展示&#xff1a; 1.题目要求&#xff1a; 给你一个整数数组 nums 和一个整数 k &#xff0…...

编程日记 2023/5/26 20:31:25

Java ---多态

&#xff08;一&#xff09;定义 官方&#xff1a;多态是同一个行为具有多个不同表现形式或形态的能力。多态就是同一个接口&#xff0c;使用不同的实例而执行不同操作。 生活中的多态&#xff0c;如图所示&#xff1a; 多态性是对象多种表现形式的体现。 现实中&#xff0c;…...

编程日记 2023/5/24 12:48:17

13个程序员常用开发工具用途推荐整理

作为一名刚入门的程序员&#xff0c;选择合适的开发工具可以提高工作效率&#xff0c;加快学习进度。在本文中&#xff0c;我将向您推荐10个常用的开发工具&#xff0c;并通过简单的例子和代码来介绍它们的主要用途。 1. Visual Studio Code Visual Studio Code&#xff08;V…...

编程日记 2023/5/26 20:33:18

TCP分包和粘包

文章目录TCP分包和粘包TCP分包TCP 粘包分包和粘包解决方案&#xff1a;TCP分包和粘包 TCP分包 场景&#xff1a;发送方发送字符串”helloworld”&#xff0c;接收方却分别接收到了两个数据包&#xff1a;字符串”hello”和”world”发送端发送了数量较多的数据&#xff0c;接…...

编程日记 2023/5/17 10:34:30

手撕深度学习中的优化器

深度学习中的优化算法采用的原理是梯度下降法&#xff0c;选取适当的初值params&#xff0c;不断迭代&#xff0c;进行目标函数的极小化&#xff0c;直到收敛。由于负梯度方向时使函数值下降最快的方向&#xff0c;在迭代的每一步&#xff0c;以负梯度方向更新params的值&#…...

编程日记 2023/5/30 9:02:31

英文打字小游戏

目录 1 实验目的 2 实验报告内容 3 实验题目 4 实验环境 5 实验分析和设计思路 6 流程分析和类图结构 ​编辑 7. 实验结果与测试分析 8. 总结 这周没有更新任何的文章&#xff0c;感到十分的抱歉。因为我们老师让我们做一个英文打字的小游戏&#xff0c;并要求撰写实验…...

编程日记 2023/5/16 7:12:01

PCB生产工艺流程三：生产PCB的内层线路有哪7步

PCB生产工艺流程三&#xff1a;生产PCB的内层线路有哪7步 在我们的PCB生产工艺流程的第一步就是内层线路&#xff0c;那么它的流程又有哪些步骤呢&#xff1f;接下来我们就以内层线路的流程为主题&#xff0c;进行详细的分析。 由半固化片和铜箔压合而成&#xff0c;用于…...

编程日记 2023/5/27 14:25:00

算法竞赛进阶指南0x61 最短路

对于一张有向图&#xff0c;我们一般有邻接矩阵和邻接表两种存储方式。对于无向图&#xff0c;可以把无向边看作两条方向相反的有向边&#xff0c;从而采用与有向图一样的存储方式。 $$ 邻接矩阵的空间复杂度为 O(n^2)&#xff0c;因此我们一般不采用这种方式 $$ 我们用数组模…...

编程日记 2023/5/14 14:14:55

[学习篇] Autoreleasepool

参考文章&#xff1a; https://www.jianshu.com/p/ec2c854b2efd https://suhou.github.io/2018/01/21/%E5%B8%A6%E7%9D%80%E9%97%AE%E9%A2%98%E7%9C%8B%E6%BA%90%E7%A0%81----%E5%AD%90%E7%BA%BF%E7%A8%8BAutoRelease%E5%AF%B9%E8%B1%A1%E4%BD%95%E6%97%B6%E9%87%8A%E6%94%BE/ …...

编程日记 2023/5/15 11:03:47

晶体基本知识

文章目录晶体基本知识基本概念晶胞&#xff1c;晶格&#xff1c;晶粒&#xff1c;晶体晶胞原子坐标(原子分数坐标)六方晶系与四轴定向七大晶系和十四种点阵结构学习资料吉林大学某实验室教程---知乎系列晶体与压敏器件晶体基本知识 基本概念 晶胞&#xff1c;晶格&#xff1c…...

编程日记 2023/5/17 14:21:14

免费CRM如何进行选择？

如今CRM领域成为炙手可热的赛道&#xff0c;很多CRM系统厂商甚至打出完全免费的口号&#xff0c;是否真的存在完全免费的crm系统&#xff1f;很多企业在免费使用过程中会出现被迫终止的问题&#xff0c;需要花费高价钱才能继续使用&#xff0c;那么&#xff0c;免费crm系统哪个…...

编程日记 2023/5/16 22:41:30

关于金融类iOS套壳上架，我帮你总结了这些经验

首先说明&#xff0c;本文中出现的案例的&#xff0c;没有特别的专门针对谁&#xff0c;只是用于分析&#xff0c;如有觉得不妥的&#xff0c;请及时联系我删除&#xff0c;鉴于本文发出之后&#xff0c;可能造成的一些影响&#xff0c;所以大家看看就好了&#xff0c;千万不要…...

编程日记 2023/5/16 23:41:36

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/2/7 0:37:40

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2026/2/6 13:10:51

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2026/2/6 15:56:54

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52