本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询
本节作业之跟随鼠标的天使、模拟京东按键输入内容、模拟京东快递单号查询
- 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…...
ChatGPT 被大面积封号，到底发生什么了？
意大利数据保护机表示 OpenAI 公司不但非法收集大量意大利用户个人数据，没有设立检查 ChatGPT 用户年龄的机制。 ChatGPT 似乎正在遭遇一场滑铁卢。 3月31日， 大量用户在社交平台吐槽，自己花钱开通的 ChatGPT 账户已经无法登录，更…...
教你精通JavaSE语法之第十一章、认识异常
一、异常的概念与体系结构 1.1异常的概念 在Java中，将程序执行过程中发生的不正常行为称为异常。比如之前写代码时经常遇到的： 1.算术异常 System.out.println(10 / 0); // 执行结果 Exception in thread "main" java.lang.ArithmeticExcep…...
display、visibility、opacity隐藏元素的区别
display、visibility、opacity隐藏元素的区别 display: none 事件监听：无法进行DOM事件监听。 元素从网页中消失，并且不占据位置再次从网页中出现会引起重排 进而引起重绘继承：不会被子元素继承，因为子元素也不被渲染。 visib…...
Linux Shell 实现一键部署tomcat10+java13
tomcat 前言 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器，属于轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试JSP 程序的首选。对于一个初学者来说，可以这样认为，当…...
软硬皆施,WMS仓库管理系统+PDA,实现效率狂飙
人工经验Excel表格，是传统第三方仓储企业常用的管理模式。在这种管理模式下，对仓库员工的Excel操作能力、业务经验和工作素养要求极高。一旦员工的经验能力不足，就会导致仓库业务运行不顺畅，效率低下，而员工也会因长时…...
DJ3-2 传输层（第二节课）
目录 一、如何实现可靠数据传输 1. 需要解决地问题 2. 使用的描述方法 二、rdt1.0：完全可靠信道上的可靠数据传输 1. 前提条件 2. 有限状态机 FSM 三、rdt2.0：仅具有 bit 错误的信道上的可靠数据传输 1. 前提条件 2. 有限状态机 FSM 3. 停等协…...
FrIf-FrIf功能模块概述和与底层驱动的交互
总目录链接==>> AutoSAR入门和实战系列总目录 总目录链接==>> AutoSAR BSW高阶配置系列总目录 文章目录 1 FlexRay 接口模块概述2 与FlexRay底层驱动的交互1 FlexRay 接口模块概述 FlexRay 接口模块通过 FlexRay 驱动程序模块间接与 FlexRay 控制器通信。 它…...
【LeetCode】前 K 个高频元素（堆）
目录 1.题目要求： 给你一个整数数组 nums 和一个整数 k ，请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 2.解题思路： 代码展示： 1.题目要求： 给你一个整数数组 nums 和一个整数 k ࿰…...
Java ---多态
（一）定义 官方：多态是同一个行为具有多个不同表现形式或形态的能力。多态就是同一个接口，使用不同的实例而执行不同操作。 生活中的多态，如图所示： 多态性是对象多种表现形式的体现。 现实中，…...
13个程序员常用开发工具用途推荐整理
作为一名刚入门的程序员，选择合适的开发工具可以提高工作效率，加快学习进度。在本文中，我将向您推荐10个常用的开发工具，并通过简单的例子和代码来介绍它们的主要用途。 1. Visual Studio Code Visual Studio Code（V…...
TCP分包和粘包
文章目录TCP分包和粘包TCP分包TCP 粘包分包和粘包解决方案：TCP分包和粘包 TCP分包 场景：发送方发送字符串”helloworld”，接收方却分别接收到了两个数据包：字符串”hello”和”world”发送端发送了数量较多的数据，接…...
手撕深度学习中的优化器
深度学习中的优化算法采用的原理是梯度下降法，选取适当的初值params，不断迭代，进行目标函数的极小化，直到收敛。由于负梯度方向时使函数值下降最快的方向，在迭代的每一步，以负梯度方向更新params的值&#…...
英文打字小游戏
目录 1 实验目的 2 实验报告内容 3 实验题目 4 实验环境 5 实验分析和设计思路 6 流程分析和类图结构 编辑 7. 实验结果与测试分析 8. 总结 这周没有更新任何的文章，感到十分的抱歉。因为我们老师让我们做一个英文打字的小游戏，并要求撰写实验…...
PCB生产工艺流程三：生产PCB的内层线路有哪7步
PCB生产工艺流程三：生产PCB的内层线路有哪7步 在我们的PCB生产工艺流程的第一步就是内层线路，那么它的流程又有哪些步骤呢？接下来我们就以内层线路的流程为主题，进行详细的分析。 由半固化片和铜箔压合而成，用于…...
算法竞赛进阶指南0x61 最短路
对于一张有向图，我们一般有邻接矩阵和邻接表两种存储方式。对于无向图，可以把无向边看作两条方向相反的有向边，从而采用与有向图一样的存储方式。 $$ 邻接矩阵的空间复杂度为 O(n^2)，因此我们一般不采用这种方式 $$ 我们用数组模…...
[学习篇] Autoreleasepool
参考文章： 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/ …...
晶体基本知识
文章目录晶体基本知识基本概念晶胞＜晶格＜晶粒＜晶体晶胞原子坐标(原子分数坐标)六方晶系与四轴定向七大晶系和十四种点阵结构学习资料吉林大学某实验室教程---知乎系列晶体与压敏器件晶体基本知识 基本概念 晶胞＜晶格＜…...
免费CRM如何进行选择？
如今CRM领域成为炙手可热的赛道，很多CRM系统厂商甚至打出完全免费的口号，是否真的存在完全免费的crm系统？很多企业在免费使用过程中会出现被迫终止的问题，需要花费高价钱才能继续使用，那么，免费crm系统哪个…...
关于金融类iOS套壳上架，我帮你总结了这些经验
首先说明，本文中出现的案例的，没有特别的专门针对谁，只是用于分析，如有觉得不妥的，请及时联系我删除，鉴于本文发出之后，可能造成的一些影响，所以大家看看就好了，千万不要…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
)
OpenLayers 分屏对比(地图联动)
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...