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

最新推荐文章于 2024-09-07 14:37:16 发布

子非鱼921

最新推荐文章于 2024-09-07 14:37:16 发布

阅读量865

点赞数 8

分类专栏：【前端】JavaScript入门及实战（1-140）文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_45980065/article/details/140878240

版权

【前端】JavaScript入门及实战（1-140）专栏收录该内容

28 篇文章 0 订阅

订阅专栏

文章目录

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("按键松开了");
		 };*/
				
		// 获取input
		var 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
		 
			火狐的userAgent
				Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
			  
			Chrome的userAgent
				Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
			  
			IE8
				Mozilla/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)
			 
			IE9
				Mozilla/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)
			  
			IE10
				Mozilla/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)
			  
			IE11
				Mozilla/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>

子非鱼921

关注

8
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
【前端】JavaScript入门及实战121-125

Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面。如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息。Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息。Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器。History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录。forward()：可以跳转下一个页面，作用和浏览器的前进按钮一样。
复制链接

扫一扫

专栏目录