【前端】JavaScript入门及实战121-125
文章目录
- 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…...
pytest测试框架之http协议接口测试
1 接口测试 日常测试中接口测试是一项重要的工作，尤其是http协议的接口测试更加普遍,比如一些常用的测试框架或者工具（robotframework框架，testng框架，postman等）都支持http接口的测试，而这节内容主要介绍…...
FFmpeg源码：av_gcd函数分析
一、引言 公约数，是一个能同时整除几个整数的数。如果一个整数同时是几个整数的约数，称这个整数为它们的“公约数”；公约数中最大的称为最大公约数。对任意的若干个正整数，1总是它们的公约数。 公约数与公倍数相反，就…...
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…...
【秋招笔试】24-07-27-OPPO-秋招笔试题(算法岗)
🍭 大家好这里是清隆学长 ，一枚热爱算法的程序员 💻 ACM金牌团队🏅️ | 多次AK大厂笔试 ｜ 编程一对一辅导 ✨ 本系列打算持续跟新 秋招笔试题 👏 感谢大家的订阅➕ 和 喜欢💗 和 手里的小花花🌸 ✨ 笔试合集传送们 -> 🧷春秋招笔试合集 💡 第一题贪心模拟…...
AUTOSAR实战教程 - 模式管理BswM与其他各模块的交互
近日驻厂某OEM,幸得大块的个人时间, 把BswM这一块的内容从ETAS/ISOLAR工具配置到代码实现做了一个全方位的CT. 2024,希望孜孜内卷的汽车人升职加薪! 博主近期写的一首小诗,也一并送给大家,懂的都懂: 在看不到阳光的冬天/ 我染了风寒/ 白天点灯/ 晚上吃药/ 躺在被窝里才敢…...
经典非比较排序—计数排序的Java实现方式
目录 1.具体思路： 2.代码实现： 3.代码分析 4.示例测试： 测试源码： 测试结果： 计数排序，又被称为鸽巢原理，属于桶排序的一种，其本质是通过哈希映射思想，设定计数数组输入以…...
【C++从小白到大牛】栈和队列（优先级队列）
目录 引言： 使用方法篇： stack： queue priority_queue 使用方法： 模拟实现篇： stack： 原码： queue 原码： priority_queue 插入和删除数据的思想： 仿函数实…...
Golang之OpenGL（一）
使用OpenGL实现窗口中绘制三角形（纯色|彩色）、正方形（变色） 一、简单实现窗口绘制三角形二、绘制的多颜色三角形（基于 ‘ 简单实现窗口绘制三角形 ’ ）1、在顶点着色器和片段着色器中添加了颜色的输入和输出…...
122. Go反射中与结构体相关的常用方法与应用
文章目录 encoding/jsonreflect 简介reflect.Value 常用方法reflect.Type 常用方法 应用一：使用 reflect 实现 encoding/json序列化反序列化 应用二：使用Tag实现字段级别的访问控制tag 行为自定义案例：结构体字段访问控制 总结 在使用 Go 语言…...
Java入门、进阶、强化、扩展、知识体系完善等知识点学习、性能优化、源码分析专栏分享
场景 作为一名Java开发者，势必经历过从入门到自学、从基础到进阶、从学习到强化的过程。 当经历过几年企业级开发的磨炼，再回头看之前的开发过程、成长阶段发现确实是走了好多的弯路。 作为一名终身学习的信奉者，秉承Java体系需持续学习、…...
Spring-bean销毁
bean销毁(找到销毁的bean) 在bean的声明周期中，存在一个记录bean销毁方法的阶段，以备于spring关闭的时候可以执行bean的销毁方法（单例bean） v1.0 registerDisposableBeanIfNecessary protected void registerDisposableBeanIfNec…...
【4】BlazorUI库
【4】BlazorUI库 一、Blazorise二、Ant Design Blazor三、Radzen Blazo四、Radzen Blazo 一、Blazorise Blazorise Blazorise 是一个广泛使用的 UI 框架，提供了丰富的组件库和多个主题支持，如 Bootstrap、Bulma、Material 和 AntDesign。 二、Ant Desig…...
树与二叉树【下】
目录 三. 哈夫曼树3.1 带权路径长度3.2 哈夫曼树的定义3.3 哈夫曼树的构造3.4 哈夫曼编码（经常考察） 四. 并查集4.1 如何表示“集合”关系？4.2 “并查集”的代码实现4.3 “并查集”的优化4.4 “并查集”的进一步优化 \quad 三. 哈夫曼树 \qua…...
ElementPlus 中el-select自定义指令实现触底加载请求options数据
1) 背景: 老项目翻新时，发现一个下拉框数据非常多，客户呢，希望全部数据一起展示，意思就是全部数据一起返回给前端用于展示。但这会造成明显的卡顿。~~明显的不合理! QAQ!~~ 于是压力给到前端，查询资料，各种…...
基于Selenium实现操作网页及操作windows桌面应用
Selenium操作Web页面 Why? 通常情况下，网络安全相关领域，更多是偏重于协议和通信。但是，如果协议通信过程被加密或者无法了解其协议构成，是无法直接通过协议进行处理。此时，可以考虑模拟UI操作，进而实现相…...
科普文：linux系列之操作系统内存管理简介
概叙 操作系统内存管理是计算机系统中的核心技术之一，页式管理、段式管理和段页式管理各有优缺点。页式管理通过固定大小的页框减少了外部碎片，但可能导致内部碎片；段式管理符合程序逻辑，提供了灵活的内存保护，但可能…...
【已解决】关于MyBatis的collection集合中只能取到一条数据的问题
一、问题 在涉及多表查询的时候，使用collection元素来映射集合属性时，出现了只能查询到一条数据的情况，但用sql语句在数据库中查询会有多条记录。 二、原因 如果两表联查，主表和明细表的主键都是id的话，明细表的多条…...
前端的学习-CSS（弹性布局-flex）
一：什么是弹性布局-Flex flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 语法： .box{display: flex; } .box{display: inline-flex; } 注意，设为 Flex 布局以后࿰…...
vue3集成LuckySheet实现导入本地Excel进行在线编辑，以及导出功能
第一步：克隆或者下载下面的代码 git clone https://github.com/dream-num/Luckysheet.git第二步：安装依赖 npm install npm install gulp -g 第三步：运行 npm run dev效果如下图所示 第四步：打包 打包执行成功后，…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
NFT模式：数字资产确权与链游经济系统构建
NFT模式：数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新：构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议：基于LayerZero协议实现以太坊、Solana等公链资产互通，通过零知…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...