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

【前端】JavaScript入门及实战121-125

news 文章来源：https://blog.csdn.net/weixin_45980065/article/details/140878240 2025/5/7 3:12:12

文章目录

  • 121 滚轮事件
  • 122 键盘事件
  • 123 键盘移动div
  • 124 BOM
  • 125 History

121 滚轮事件

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;}
</style>
<script type="text/javascript">window.onload = function(){/*当鼠标滚轮向下滚动时，box1变长当滚轮向上滚动时，box1变短*/var box1 = document.getElementById("box1");// 获取鼠标滚轮滚动事件/*onmousewheel是鼠标滚轮滚动的事件，会在滚轮滚动时触发但是火狐不支持该属性在火狐中需要使用DOMMouseScroll来绑定滚动事件，注意该事件需要通过addEventListener()函数来绑定*/		box1.onmousewheel = function(event){event = event || window.event;// 判断鼠标滚轮滚动的方向// event.wheelDelta可以获取鼠标滚轮滚动的方向// 向上滚 120  向下滚 -120// wheelDelta这个值我们不看大小，只看正负//alert(event.wheelDelta);// wheelDelta这个属性火狐中不支持// 在火狐中使用event.detail来获取滚动的方向// 向上滚 -3 向下滚 3//alert(event.detail);// 判断鼠标滚轮滚动的方向if(event.wheelDelta > 0 || event.detail < 0){// 向上滚，box1变短box1.style.height = box1.clientHeight - 10 + "px";				}else{// 向下滚，box1变长box1.style.height = box1.clientHeight + 10 + "px";}		/*使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false需要使用event来取消默认行为event.preventDefault();但是IE8不支持event.preventDefault();如果直接调用会报错*/event.preventDefault && event.preventDefault();			/*当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，如果不希望发生，则可以取消默认行为*/return false;};/*bind(box1, "DOMMouseScroll", function(){});*/bind(box1, "DOMMouseScroll", box1.onmousewheel);};function bind(obj, eventStr, callback){if(obj.addEventListener){// 大部分浏览器兼容方式obj.addEventListener(eventStr, callback, false);		}else{/*this是谁由调用方式决定callback.call(obj)*/// IE8及以下//obj.attachEvent("on" + eventStr, callback);				obj.attachEvent("on" + eventStr, function(){// 在匿名函数调用回调函数callback.call(obj);});				}}
</script>
</head>
<body><div id="box1"></div>
</body>
</html>

122 键盘事件

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;}
</style>
<script type="text/javascript">window.onload = function(){/*键盘事件：onkeydown：按键被按下对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发，当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。onkeyup：按键被松开键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document*/document.onkeydown = function(event){event = event || window.event;		/*可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下除了keyCode，事件对象中还提供了几个属性altKey、ctrlKey、shiftKey这个三个用来判断alt ctrl 和 shift是否被按下，如果按下则返回true，否则返回false*///console.log(event.keyCode); // ctrl：17// 判断一个y是否被按下// 判断y和ctrl是否同时被按下if(event.keyCode === 89 && event.ctrlKey){console.log("ctrl和y都被按下了");}};/*document.onkeyup = function(){console.log("按键松开了");};*/// 获取inputvar input = document.getElementsByTagName("input")[0];				input.onkeydown = function(event){event = event || window.event;// console.log(event.keyCode);// 数字编码 48（0） - 57（9）// 使文本框中不能输入数字if(event.keyCode >= 48 && event.keyCode <= 57){// 在文本框中输入内容，属于onkeydown的默认行为// 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中return false;}};	};
</script>
</head>
<body><input type="text" />
</body>
</html>

123 键盘移动div

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}
</style>
<script type="text/javascript">// 使div可以根据不同的方向键向不同的方向移动/*按左键，div向左移按右键，div向右移。。。*/	window.onload = function(){// 为document绑定一个按键按下的事件document.onkeydown = function(event){event = event || window.event;// 定义一个变量，来表示移动的速度var speed = 10;// 当用户按了ctrl以后，速度加快if(event.ctrlKey){speed = 500;}/*37 左38 上39 右40 下*/switch(event.keyCode){case 37://alert("向左"); left值减小box1.style.left = box1.offsetLeft - speed + "px";break;case 39://alert("向右");box1.style.left = box1.offsetLeft + speed + "px";break;case 38://alert("向上");box1.style.top = box1.offsetTop - speed + "px";break;case 40://alert("向下");box1.style.top = box1.offsetTop + speed + "px";break;}};};
</script>
</head>
<body><div id="box1"></div>
</body>
</html>

124 BOM

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}
</style>
<script type="text/javascript">/*BOM浏览器对象模型BOM可以使我们通过JS来操作浏览器在BOM中为我们提供了一组对象，用来完成对浏览器的操作BOM对象Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息 这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用*/	//console.log(navigator);//console.log(location);//console.log(history);/*Navigator代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了一般我们只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent火狐的userAgentMozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0Chrome的userAgentMozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36IE8Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)IE9Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)IE10Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)IE11Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了*///alert(navigator.appName);var ua = navigator.userAgent;console.log(ua);if(/firefox/i.test(ua)){alert("你是火狐");}else if(/chrome/i.test(ua)){alert("你是Chrome");}else if(/msie/i.test(ua)){alert("你是IE浏览器");}else if("ActiveXObject" in window){alert("你是IE11");}/*如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息比如：ActiveXObject*//*if("ActiveXObject" in window){alert("你是IE");}else{alert("你不是IE");}*//*alert("ActiveXObject" in window);*/
</script>
</head>
<body><div id="box1"></div>
</body>
</html>

125 History

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css"></style>
<script type="text/javascript">/*History：对象可以用来操作浏览器向前或向后翻页*/window.onload = function(){// 获取按钮对象var btn = document.getElementById("btn");btn.onclick = function(){/*length：属性，可以获取到当成访问的链接数量*/alert(history.length);/*back()：可以用来回退到上一个页面，作用和浏览器的回退按钮一样*/history.back();/*forward()：可以跳转下一个页面，作用和浏览器的前进按钮一样*/history.forward();/*go()：可以用来跳转到指定的页面它需要一个整数作为参数1:表示向前跳转一个页面 相当于forward()2:表示向前跳转两个页面-1:表示向后跳转一个页面-2:表示向后跳转两个页面*/history.go(-2);};};
</script>
</head>
<body><button id="btn">点我一下</button><h1>History</h1><a href="01.BOM.html">去BOM</a>	<div id="box1"></div>
</body>
</html>

相关文章：

【前端】JavaScript入门及实战121-125

文章目录 121 滚轮事件122 键盘事件123 键盘移动div124 BOM125 History 121 滚轮事件 <!DOCTYPE html> <html> <head> <title></title> <meta charset "utf-8"> <style type"text/css">#box1 {width: 100px;h…...

编程日记 2024/8/3 10:48:42

pytest测试框架之http协议接口测试

1 接口测试 日常测试中接口测试是一项重要的工作&#xff0c;尤其是http协议的接口测试更加普遍,比如一些常用的测试框架或者工具&#xff08;robotframework框架&#xff0c;testng框架&#xff0c;postman等&#xff09;都支持http接口的测试&#xff0c;而这节内容主要介绍…...

编程日记 2024/8/3 10:47:41

FFmpeg源码：av_gcd函数分析

一、引言 公约数&#xff0c;是一个能同时整除几个整数的数。如果一个整数同时是几个整数的约数&#xff0c;称这个整数为它们的“公约数”&#xff1b;公约数中最大的称为最大公约数。对任意的若干个正整数&#xff0c;1总是它们的公约数。 公约数与公倍数相反&#xff0c;就…...

编程日记 2024/8/3 10:46:40

springboot物流寄查系统-计算机毕业设计源码95192

目 录 1 绪论 1.1 研究背景 1.2选题背景 1.3论文结构与章节安排 2 springboot物流寄查系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分析 2…...

编程日记 2024/8/3 10:45:39

【秋招笔试】24-07-27-OPPO-秋招笔试题(算法岗)

🍭 大家好这里是清隆学长 ，一枚热爱算法的程序员 💻 ACM金牌团队🏅️ | 多次AK大厂笔试 ｜ 编程一对一辅导 ✨ 本系列打算持续跟新 秋招笔试题 👏 感谢大家的订阅➕ 和 喜欢💗 和 手里的小花花🌸 ✨ 笔试合集传送们 -> 🧷春秋招笔试合集 💡 第一题贪心模拟…...

编程日记 2024/8/3 10:44:38

AUTOSAR实战教程 - 模式管理BswM与其他各模块的交互

近日驻厂某OEM,幸得大块的个人时间, 把BswM这一块的内容从ETAS/ISOLAR工具配置到代码实现做了一个全方位的CT. 2024,希望孜孜内卷的汽车人升职加薪! 博主近期写的一首小诗,也一并送给大家,懂的都懂: 在看不到阳光的冬天/ 我染了风寒/ 白天点灯/ 晚上吃药/ 躺在被窝里才敢…...

编程日记 2024/8/3 10:41:35

经典非比较排序—计数排序的Java实现方式

目录 1.具体思路&#xff1a; 2.代码实现&#xff1a; 3.代码分析 4.示例测试&#xff1a; 测试源码&#xff1a; 测试结果&#xff1a; 计数排序&#xff0c;又被称为鸽巢原理&#xff0c;属于桶排序的一种&#xff0c;其本质是通过哈希映射思想&#xff0c;设定计数数组输入以…...

编程日记 2024/8/3 10:40:34

【C++从小白到大牛】栈和队列（优先级队列）

目录 引言&#xff1a; 使用方法篇&#xff1a; stack&#xff1a; queue priority_queue 使用方法&#xff1a; 模拟实现篇&#xff1a; stack&#xff1a; 原码&#xff1a; queue 原码&#xff1a; priority_queue 插入和删除数据的思想&#xff1a; 仿函数实…...

编程日记 2024/8/3 10:39:33

Golang之OpenGL（一）

使用OpenGL实现窗口中绘制三角形&#xff08;纯色|彩色&#xff09;、正方形&#xff08;变色&#xff09; 一、简单实现窗口绘制三角形二、绘制的多颜色三角形&#xff08;基于 ‘ 简单实现窗口绘制三角形 ’ &#xff09;1、在顶点着色器和片段着色器中添加了颜色的输入和输出…...

编程日记 2024/8/3 10:38:32

122. Go反射中与结构体相关的常用方法与应用

文章目录 encoding/jsonreflect 简介reflect.Value 常用方法reflect.Type 常用方法 应用一&#xff1a;使用 reflect 实现 encoding/json序列化反序列化 应用二&#xff1a;使用Tag实现字段级别的访问控制tag 行为自定义案例&#xff1a;结构体字段访问控制 总结 在使用 Go 语言…...

编程日记 2024/8/3 10:37:31

Java入门、进阶、强化、扩展、知识体系完善等知识点学习、性能优化、源码分析专栏分享

场景 作为一名Java开发者&#xff0c;势必经历过从入门到自学、从基础到进阶、从学习到强化的过程。 当经历过几年企业级开发的磨炼&#xff0c;再回头看之前的开发过程、成长阶段发现确实是走了好多的弯路。 作为一名终身学习的信奉者&#xff0c;秉承Java体系需持续学习、…...

编程日记 2024/8/3 10:36:30

Spring-bean销毁

bean销毁(找到销毁的bean) 在bean的声明周期中&#xff0c;存在一个记录bean销毁方法的阶段&#xff0c;以备于spring关闭的时候可以执行bean的销毁方法&#xff08;单例bean&#xff09; v1.0 registerDisposableBeanIfNecessary protected void registerDisposableBeanIfNec…...

编程日记 2024/8/3 10:33:28

【4】BlazorUI库

【4】BlazorUI库 一、Blazorise二、Ant Design Blazor三、Radzen Blazo四、Radzen Blazo 一、Blazorise Blazorise Blazorise 是一个广泛使用的 UI 框架&#xff0c;提供了丰富的组件库和多个主题支持&#xff0c;如 Bootstrap、Bulma、Material 和 AntDesign。 二、Ant Desig…...

编程日记 2024/8/3 10:30:25

树与二叉树【下】

目录 三. 哈夫曼树3.1 带权路径长度3.2 哈夫曼树的定义3.3 哈夫曼树的构造3.4 哈夫曼编码&#xff08;经常考察&#xff09; 四. 并查集4.1 如何表示“集合”关系&#xff1f;4.2 “并查集”的代码实现4.3 “并查集”的优化4.4 “并查集”的进一步优化 \quad 三. 哈夫曼树 \qua…...

编程日记 2024/8/3 10:28:23

ElementPlus 中el-select自定义指令实现触底加载请求options数据

1) 背景: 老项目翻新时&#xff0c;发现一个下拉框数据非常多&#xff0c;客户呢&#xff0c;希望全部数据一起展示&#xff0c;意思就是全部数据一起返回给前端用于展示。但这会造成明显的卡顿。~~明显的不合理! QAQ!~~ 于是压力给到前端&#xff0c;查询资料&#xff0c;各种…...

编程日记 2024/8/3 10:25:19

基于Selenium实现操作网页及操作windows桌面应用

Selenium操作Web页面 Why? 通常情况下&#xff0c;网络安全相关领域&#xff0c;更多是偏重于协议和通信。但是&#xff0c;如果协议通信过程被加密或者无法了解其协议构成&#xff0c;是无法直接通过协议进行处理。此时&#xff0c;可以考虑模拟UI操作&#xff0c;进而实现相…...

编程日记 2024/8/3 10:24:18

科普文：linux系列之操作系统内存管理简介

概叙 操作系统内存管理是计算机系统中的核心技术之一&#xff0c;页式管理、段式管理和段页式管理各有优缺点。页式管理通过固定大小的页框减少了外部碎片&#xff0c;但可能导致内部碎片&#xff1b;段式管理符合程序逻辑&#xff0c;提供了灵活的内存保护&#xff0c;但可能…...

编程日记 2024/8/3 10:22:15

【已解决】关于MyBatis的collection集合中只能取到一条数据的问题

一、问题 在涉及多表查询的时候&#xff0c;使用collection元素来映射集合属性时&#xff0c;出现了只能查询到一条数据的情况&#xff0c;但用sql语句在数据库中查询会有多条记录。 二、原因 如果两表联查&#xff0c;主表和明细表的主键都是id的话&#xff0c;明细表的多条…...

编程日记 2024/8/3 10:21:14

前端的学习-CSS（弹性布局-flex）

一&#xff1a;什么是弹性布局-Flex flex 是 Flexible Box 的缩写&#xff0c;意为"弹性布局"&#xff0c;用来为盒状模型提供最大的灵活性。 语法&#xff1a; .box{display: flex; } .box{display: inline-flex; } 注意&#xff0c;设为 Flex 布局以后&#xff0…...

编程日记 2024/8/3 10:19:12

vue3集成LuckySheet实现导入本地Excel进行在线编辑，以及导出功能

第一步&#xff1a;克隆或者下载下面的代码 git clone https://github.com/dream-num/Luckysheet.git第二步&#xff1a;安装依赖 npm install npm install gulp -g 第三步&#xff1a;运行 npm run dev效果如下图所示 第四步&#xff1a;打包 打包执行成功后&#xff0c;…...

编程日记 2024/8/3 10:17:09

【征求意见】同济大学--城镇给水厂碳排放核算与评价方法

城镇给水厂保障城镇居民正常生活&#xff0c;是社会经济良性发展的重要基础性设施&#xff0c;对于我国双碳战略目标的实现至关重要。 随着城镇化的发展&#xff0c;城镇供水量不断升高&#xff0c;加上 水资源与生态环境问题不断涌现&#xff0c;人们对水的安全和品质的需求日…...

编程日记 2024/8/3 10:16:08

【Python】后台开发返回方法和状态码类的实现

Python 后台开发中&#xff0c;获取返回的类方法&#xff0c;以及状态码类的实现 代码备份 Code - response.py """ Response class for quick generate response """ from loguru_logger import get_loggerlogger get_logger(__name__)clas…...

编程日记 2024/8/3 10:14:06

opencloudosV8.6和openEuler 24安装 k8s

在三台机器上部署 Kubernetes 集群 1.环境准备2.在所有节点上进行以下步骤1. 更新系统和安装必要的软件包2. 禁用交换分区3. 禁用防火墙和SElinux4.系统主机名5.设置主机名与IP地址解析6.配置内核转发及网桥过滤7. 配置 Docker Cgroup 驱动8. 添加 Kubernetes 仓库并安装 kubea…...

编程日记 2024/8/3 10:12:04

Tensor安装和测试

1: 打开git官方 https://github.com/NVIDIA/TensorRT 2: 下载得到&#xff1a;TensorRT-10.2.0.19.Linux.x86_64-gnu.cuda-11.8.tar.gz 3: 下载后配置环境变量&#xff0c;上面地址记得改成真实地址。 4: 如果想python使用tensorrt&#xff0c;那么 解压后目录&#xff0c…...

编程日记 2024/8/3 10:10:01

ELK对业务日志进行收集

ELK对业务日志进行收集 下载httpd 进到文件设置收集httpd的文件进行 设置 编辑内容 用于收集日志的内容 将日志的内容发送到实例当中 input {file{path > /etc/httpd/logs/access_logtype > "access"start_position > "beginning"}file{path &g…...

编程日记 2024/8/3 10:09:00

新质生产力

新质生产力”是一个相对较新的概念&#xff0c;指的是在数字化、智能化背景下&#xff0c;依托新技术、新业态、新模式&#xff0c;提升生产力质量和效率的一种生产力形态。它强调的是技术和创新对生产力的提升作用&#xff0c;尤其是在人工智能、大数据、互联网等新兴技术的推…...

编程日记 2024/8/3 10:05:58

《LeetCode热题100》---＜5.②普通数组篇五道＞

本篇博客讲解LeetCode热题100道普通数组篇中的六道题 第三道&#xff1a;轮转数组&#xff08;中等&#xff09; 第四道&#xff1a;除自身以外数组的乘积&#xff08;中等&#xff09; 第三道&#xff1a;轮转数组&#xff08;中等&#xff09; 方法一&#xff1a;使用额外的数…...

编程日记 2024/8/3 10:04:56

【面试题】【C语言】寻找两个正序数组的中位数

寻找两个正序数组的中位数 仅供学习 题目 算法时间复杂度 二分查找算法&#xff0c;时间复杂度为 O(log(min(m, n)))&#xff0c;其中 m 和 n 分别是两个数组的长度。 子函数 查找两个数字的最大值 int max(int a, int b) {return a > b ? a : b; }查找两个数字的最小…...

编程日记 2024/8/3 10:02:53

原始的原型链是怎样玩的

带着问题看代码&#xff1a; 1、原始的继承是怎样实现继承的&#xff1f; A类的prototype 属性 B类的实例 2、实现继承后&#xff0c;连B类的中实例的属性&#xff08;放在了A类的prototype中&#xff09;和原型链的上的东西都可以用 3、A.prototype.constructor实际上已经指向…...

编程日记 2024/8/3 10:01:52

RabbitMQ高级篇（如何保证消息的可靠性、如何确保业务的幂等性、延迟消息的概念、延迟消息的应用）

文章目录 1. 消息丢失的情况2. 生产者的可靠性2.1 生产者重连2.2 生产者确认2.3 生产者确认机制的代码实现2.4 如何看待和处理生产者的确认信息 3. 消息代理&#xff08;RabbitMQ&#xff09;的可靠性3.1 数据持久化3.2 LazyQueue&#xff08; 3.12 版本后所有队列都是 Lazy Qu…...

编程日记 2024/8/3 10:00:51