Java教程

JavaScript入门(六)

本文主要是介绍JavaScript入门(六),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

JavaScript入门(六)

哔哩哔哩链接:https://www.bilibili.com/video/BV1YW411T7GX?spm_id_from=333.999.0.0

七、代码讲解部分

01.BOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			/*
			 * BOM
			 * 	- 浏览器对象模型
			 * 	- BOM可以使我们通过JS来操作浏览器
			 * 	- 在BOM中为我们提供了一组对象,用来完成对浏览器的操作
			 * 	- BOM对象
			 * 		Window
			 * 			- 代表的是整个浏览器的窗口,同时window也是网页中的全局对象
			 * 		Navigator
			 * 			- 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
			 * 		Location
			 * 			- 代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,
			              或者操作浏览器跳转页面
			 * 		History
			 * 			- 代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
			 * 				由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页
			 * 				而且该操作只在当次访问时有效(即当浏览器关闭之后就没有了)
			 * 		Screen
			 * 			- 代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
			 * 
			 * 
			 * 		这些BOM对象在浏览器中都是作为window对象的属性保存的,
			 * 			可以通过window对象来使用,也可以直接使用(全局的)
			 * 
			 * 		
			 */
			//console.log(window.navigator);
			//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(即edge,不叫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)){  //i忽略大小写
				alert("你是火狐!!!");
			}else if(/chrome/i.test(ua)){
				alert("你是Chrome");
			}else if(/msie/i.test(ua)){
				alert("你是IE浏览器~~~");
			}else if("ActiveXObject" in window){ //window.ActiveXObject不行,
                //ie为了和其他浏览器不区别对待
				alert("你是IE11,枪毙了你~~~");
			}
			
			/*
			 * 如果通过UserAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器的信息
			 * 比如:ActiveXObject(为一个构造函数)
			 */
			/*if("ActiveXObject" in window){
				alert("你是IE,我已经抓住你了~~~");
			}else{
				alert("你不是IE~~~");
			}*/
			
			/*alert("ActiveXObject" in window);*/

			/*alert("!!window.ActiveXObject);  在ie11即edge中为false,ie8,9,10为true,
			ie为了和其他浏览器不区别对待
			*/  									
		</script>
	</head>
	<body>		
	</body>
</html>

02.History

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<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>
	</body>
</html>

test01(对应history)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>TEST01</h1>
		<a href="test02.html">去test02</a>
	</body>
</html>

test02(对应history)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>TEST02</h1>
		<a href="02.History.html">去02.History.html</a>
	</body>
</html>

03.Location

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * Location
			 * 	- 该对象中封装了浏览器的地址栏的信息
			 */
			window.onload = function(){
				
				//获取按钮对象
				var btn = document.getElementById("btn");
				
				btn.onclick = function(){
					
					//如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)
					//alert(location);
					
					/*
					 * 如果直接将location属性修改为一个完整的路径(http://www.baidu.com),
					   或相对路径(01.BOM.html)
					 * 	则我们页面会自动跳转到该路径,并且会生成相应的历史记录
					 */
					//location = "http://www.baidu.com";
					//location = "01.BOM.html";
					
					/*
					 * assign()
					 * 	- 用来跳转到其他的页面,作用和直接修改location一样
					 */
					//location.assign("http://www.baidu.com");
					
					/*
					 * reload()
					 * 	- 用于重新加载当前页面,作用和刷新按钮一样
					 * 	- 如果在方法中传递一个true,作为参数,则会强制清空缓
					      存(即像input里面输入的内容)刷新页面
					         也可以按Ctrl+f清除缓存
					 */
					//location.reload(true);
					
					/*
					 * replace()
					 * 	- 可以使用一个新的页面替换当前页面,调用完毕也会跳转页面
					 * 		不会生成历史记录,不能使用回退按钮回退
					 */
					location.replace("01.BOM.html");					
				};				
			};			
		</script>
	</head>
	<body>		
		<button id="btn">点我一下</button>		
		<h1>Location</h1>		
		<input type="text" />
		<a href="01.BOM.html">去BOM</a>
	</body>
</html>

04.定时调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取count
				var count = document.getElementById("count");
				
				//使count中的内容,自动切换
				/*
				 * JS的程序的执行速度是非常非常快的
				 * 	如果希望一段程序,可以每间隔一段时间执行一次,可以使用定时调用
				 */
				/*for(var i=0 ; i<10000 ; i++){
					count.innerHTML = i;
					
					alert("hello");
				}*/
				
				/*
				 * setInterval()
				 * 	- 定时调用
				 * 	- 可以将一个函数,每隔一段时间执行一次
				 * 	- 参数:
				 * 		1.回调函数,该函数会每隔一段时间被调用一次
				 * 		2.每次调用间隔的时间,单位是毫秒
				 * 
				 * 	- 返回值:
				 * 		返回一个Number类型的数据
				 * 		这个数字用来作为定时器的唯一标识
				 */
				var num = 1;
				
				var timer = setInterval(function(){
					
					count.innerHTML = num++;
					
					if(num == 11){
						//关闭定时器
						clearInterval(timer);
					}
					
				},1000);
				
				//console.log(timer);
				
				//clearInterval()可以用来关闭一个定时器
				//方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器
				//clearInterval(timer);				
			};						
		</script>
	</head>
	<body>
		<h1 id="count"></h1>
	</body>
</html>

05.切换图片练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 使图片可以自动切换
				 */
				
				//获取img标签
				var img1 = document.getElementById("img1");
				
				//创建一个数组来保存图片的路径
				var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
				
				//创建一个变量,用来保存当前图片的索引
				var index = 0;
				
				//定义一个变量,用来保存定时器的标识
				var timer;
				
				//为btn01绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					/*
					 * 目前,我们每点击一次按钮,就会开启一个定时器,(为开始按钮绑定了单击响应函数)
					 * 	点击多次就会开启多个定时器,这就导致图片的切换速度过快(加快),
					 * 	并且我们只能关闭最后一次开启的定时器
					 */
					
					//在开启定时器之前,需要将当前元素上的其他定时器关闭
					clearInterval(timer);
					
					/*
					 * 开启一个定时器,来自动切换图片
					 */
					timer = setInterval(function(){
						//使索引自增
						index++;
						//判断索引是否超过最大索引
						/*if(index >= imgArr.length){
							//则将index设置为0
							index = 0;
						}*/
                        //index = index % imgArr.length;  这个和上面的是一样的
						index %= imgArr.length;  
						//修改img1的src属性
						img1.src = imgArr[index];
						
					},1000);
				};
				
				//为btn02绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//点击按钮以后,停止图片的自动切换,关闭定时器
					/*
					 * clearInterval()可以接收任意参数,
					 * 	如果参数是一个有效的定时器的标识,则停止对应的定时器
					 * 	如果参数不是一个有效的标识(即undefined或者NaN),
					    则什么也不做,不会报错 上面的var timer;
					 */
					clearInterval(timer);					
				};								
			};			
		</script>
	</head>
	<body>		
		<img id="img1" src="img/1.jpg"/>
		<br /><br />
		<button id="btn01">开始</button>
		<button id="btn02">停止</button>
	</body>
</html>

06.移动div练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<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(){
				
					
				//定义一个变量,来表示移动的速度
				var speed = 10;
				
				//创建一个变量表示方向
				//通过修改dir来影响移动的方向
				var dir = 0;
				
				//开启一个定时器,来控制div的移动
				setInterval(function(){
					/*
					 * 37 左
					 * 38 上
					 * 39 右
					 * 40 下
					 */
					switch(dir){
						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;
					}
				},30);
												
				//为document绑定一个按键按下的事件
				document.onkeydown = function(event){
					event = event || window.event;					
					//当用户按了ctrl以后,速度加快
					if(event.ctrlKey){
						speed = 500;
					}else{
						speed = 10;
					}
					
					//使dir等于按键的值
					dir = event.keyCode;
				};
				
				//当按键松开时,div不再移动
				document.onkeyup = function(){
					//设置方向为0
					dir = 0;
				};				
			};						
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

07.延时调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var num = 1;			
			//开启一个定时器
			/*setInterval(function(){
				console.log(num++);
			},3000);*/
						
			/*
			 * 延时调用,
			 * 	延时调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次
			 * 
			 * 延时调用和定时调用的区别,定时调用会执行多次,而延时调用只会执行一次
			 * 
			 * 延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择
			 */
			var timer = setTimeout(function(){
				console.log(num++);
			},3000);
			
			//使用clearTimeout()来关闭一个延时调用
			clearTimeout(timer);			
		</script>
	</head>
	<body>
	</body>
</html>

08.定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute; /*要想往右走要开启定位*/
				left: 0;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//定义一个变量,用来保存定时器的标识
				var timer;
				
				//点击按钮以后,使box1向右移动(left值增大)
				btn01.onclick = function(){
					
					//关闭上一个定时器,不关的话,多次点击会变得越来越快
					clearInterval(timer);
					
					//开启一个定时器,用来执行动画效果,timer未赋值,为undefined,
                    //但是定时器不会报错,没有就不停了
					timer = setInterval(function(){
						
						//获取box1的原来的left值
						var oldValue = parseInt(getStyle(box1,"left"));
						
						//在旧值的基础上增加
						var newValue = oldValue + 1;
						
						//判断newValue是否大于800
						if(newValue > 800){
							newValue = 800;
						}
						
						//将新值设置给box1
						box1.style.left = newValue + "px";
						
						//当元素移动到800px时,使其停止执行动画
						if(newValue == 800){
							//达到目标,关闭定时器
							clearInterval(timer);
						}												
					},30);										
				};				
			};
						
			/*
			 * 定义一个函数,用来获取指定元素的当前的样式
			 * 参数:
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			function getStyle(obj , name){
				
				if(window.getComputedStyle){
					//正常浏览器的方式,具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
					//IE8的方式,没有getComputedStyle()方法
					return obj.currentStyle[name];
				}				
			}						
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动</button>
		
		<br /><br />
		
		<div id="box1"></div>
		
		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
		
	</body>
</html>

09.定时器2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){				
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");				
				//获取btn02
				var btn02 = document.getElementById("btn02");								
				//点击按钮以后,使box1向右移动(left值增大)
				//这是一个box1往右和往左的例子
				btn01.onclick = function(){
					move(box1 , 800 , 10);
				};
								
				//点击按钮以后,使box1向左移动(left值减小)
				btn02.onclick = function(){
					move(box1 , 0 , 10);
				};				
			};
			
			//定义一个变量,用来保存定时器的标识
			var timer;
			
			//尝试创建一个可以执行简单动画的函数
			/*
			 * 参数:
			 * 	obj:要执行动画的对象
			 * 	target:执行动画的目标位置
			 * 	speed:移动的速度(正数向右移动,负数向左移动)
			 */
			function move(obj , target ,speed){
				//关闭上一个定时器,这是为了避免在同一个元素上开启多个定时器
				clearInterval(timer);
				
				//获取元素目前的位置
				var current = parseInt(getStyle(obj,"left"));
				
				//判断速度的正负值
				//如果从0 向 800移动,则speed为正
				//如果从800向0移动,则speed为负
				if(current > target){
					//此时速度应为负值
					speed = -speed;
				}
				
				//开启一个定时器,用来执行动画效果
				timer = setInterval(function(){
					
					//获取box1的原来的left值
					var oldValue = parseInt(getStyle(obj,"left"));
					
					//在旧值的基础上增加
					var newValue = oldValue + speed;
					
					//判断newValue是否大于800
					//从800 向 0移动
					//向左移动时,需要判断newValue是否小于target
					//向右移动时,需要判断newValue是否大于target
					if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
						newValue = target;
					}
					
					//将新值设置给box1
					obj.style.left = newValue + "px";
					
					//当元素移动到0px时,使其停止执行动画
					if(newValue == target){
						//达到目标,关闭定时器
						clearInterval(timer);
					}										
				},30);
			}						
			/*
			 * 定义一个函数,用来获取指定元素的当前的样式
			 * 参数:
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			function getStyle(obj , name){
				
				if(window.getComputedStyle){
					//正常浏览器的方式,具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
					//IE8的方式,没有getComputedStyle()方法
					return obj.currentStyle[name];
				}				
			}					
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动</button>
		<button id="btn02">点击按钮以后box1向左移动</button>
		
		<br /><br />
		
		<div id="box1"></div>
		
		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
		
	</body>
</html>

10.定时器3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 0;
				top: 200px;
			}
			
		</style>
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
			
			window.onload = function(){
				//这是两个box向四个方向移动的例子,要注意(龟兔赛跑),
                //定时器2的代码话点了其中一个在点另一个,则第一个就不动了
                
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//获取btn02
				var btn02 = document.getElementById("btn02");
								
				//点击按钮以后,使box1向右移动(left值增大)
				btn01.onclick = function(){
					move(box1 ,"left", 800 , 20);
				};				
				
				//点击按钮以后,使box1向左移动(left值减小)
				btn02.onclick = function(){
					move(box1 ,"left", 0 , 10);
				};
								
				//获取btn03
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					move(box2 , "left",800 , 10);
				};
				
				//测试按钮
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					//move(box2 ,"width", 800 , 10);
					//move(box2 ,"top", 800 , 10);
					//move(box2 ,"height", 800 , 10);
					move(box2 , "width" , 800 , 10 , function(){
						move(box2 , "height" , 400 , 10 , function(){
							move(box2 , "top" , 0 , 10 , function(){
								move(box2 , "width" , 100 , 10 , function(){							
								});
							});
						});
					});
				};
			};
			
			//定义一个变量,用来保存定时器的标识
			/*
			 * 目前我们的定时器的标识由全局变量timer保存,
			 * 	所有的执行正在执行的定时器都在这个变量中保存
			 */
			//var timer;												
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动</button>
		<button id="btn02">点击按钮以后box1向左移动</button>
		<button id="btn03">点击按钮以后box2向右移动</button>
		<button id="btn04">测试按钮</button>
		
		<br /><br />
		
		<div id="box1"></div>
		<div id="box2"></div>
		
		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
		
	</body>
</html>

11.轮播图

这是切换到第五张图片(最后一张)的时候,又会往回走变到第1张的效果,体验不好

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			/*
			 * 设置outer的样式
			 */
			#outer{
				/*设置宽和高*/
				width: 520px;
				height: 333px;
				/*居中*/
				margin: 50px auto;
				/*设置背景颜色*/
				background-color: greenyellow;
				/*设置padding*/
				padding: 10px 0;
				/*开启相对定位*/
				position: relative;
				/*裁剪溢出的内容*/
				overflow: hidden;
			}
			
			/*设置imgList*/
			#imgList{
				/*去除项目符号*/
				list-style: none;
				/*设置ul的宽度*/
				/*width: 2600px;*/
				/*开启绝对定位,让ul可以移动*/
				position: absolute;
				/*设置偏移量*/
				/*
				 * 每向左移动520px,就会显示到下一张图片
				 */
				left: 0px;
			}
			
			/*设置图片中的li*/
			#imgList li{
				/*设置浮动*/
				float: left;
				/*设置左右外边距*/
				margin: 0 10px;
			}
			
			/*设置导航按钮*/
			#navDiv{
				/*开启绝对定位*/
				position: absolute;
				/*设置位置*/
				bottom: 15px;
				/*设置left值
				 	outer宽度  520
				 	navDiv宽度 25*5 = 125
				 		520 - 125 = 395/2 = 197.5
				 * */
				/*left: 197px;*/
			}
			
			#navDiv a{
				/*设置超链接浮动*/
				float: left;
				/*设置超链接的宽和高*/
				width: 15px;
				height: 15px;
				/*设置背景颜色*/
				background-color: red;
				/*设置左右外边距*/
				margin: 0 5px;
				/*设置透明*/
				opacity: 0.5;
				/*兼容IE8透明*/
				filter: alpha(opacity=50);
			}
			
			/*设置鼠标移入的效果*/
			#navDiv a:hover{
				background-color: black;
			}
		</style>
		
		<!--引用工具-->
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				//获取imgList
				var imgList = document.getElementById("imgList");
				//获取页面中所有的img标签
				var imgArr = document.getElementsByTagName("img");
				//设置imgList的宽度
				imgList.style.width = 520*imgArr.length+"px";
				
				/*设置导航按钮居中*/
				//获取navDiv
				var navDiv = document.getElementById("navDiv");
				//获取outer
				var outer = document.getElementById("outer");
				//设置navDiv的left值   offsetWidth 获取宽度
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
				
				//默认显示图片的索引
				var index = 0;
				//获取所有的a
				var allA = document.getElementsByTagName("a");
				//设置默认选中的效果
				allA[index].style.backgroundColor = "black";
				
				/*
				 	点击超链接切换到指定的图片
				 		点击第一个超链接,显示第一个图片
				 		点击第二个超链接,显示第二个图片
				 * */
				
				//为所有的超链接都绑定单击响应函数  
				for(var i=0; i<allA.length ; i++){
					
					//获取点击超链接的索引
					//alert(i);  注意这里是for循环执行完了,单击响应函数没执行,这个不行,因为都是5

					//为每一个超链接都添加一个num属性,注意这个num是自己添加的
					allA[i].num = i;
					
					//为超链接绑定单击响应函数
					allA[i].onclick = function(){
						
						//获取点击超链接的索引,并将其设置为index
						index = this.num;
						
						//切换图片
						/*
						 * 第一张  0 0
						 * 第二张  1 -520
						 * 第三张  2 -1040
						 */
						//imgList.style.left = -520*index + "px";
						//设置选中的a
						setA();
						
						//使用move函数来切换图片,move是在tool.js中的
						move(imgList , "left" , -520*index , 20 , function(){							
						});						
					};
				}
				
				//创建一个方法用来设置选中的a
				function setA(){
					
					//遍历所有a,并将它们的背景颜色设置为红色
					for(var i=0 ; i<allA.length ; i++){
                        //等于空串就等于把background的样式去除,用默认的样式(样式表)
						allA[i].style.backgroundColor = ""; 
					}
					
					//将选中的a设置为黑色
					allA[index].style.backgroundColor = "black";
				};								
			};
			
		</script>
	</head>
	<body>
		<!-- 创建一个外部的div,来作为大的容器 -->
		<div id="outer">
			<!-- 创建一个ul,用于放置图片 -->
			<ul id="imgList">
				<li><img src="img/1.jpg"/></li>
				<li><img src="img/2.jpg"/></li>
				<li><img src="img/3.jpg"/></li>
				<li><img src="img/4.jpg"/></li>
				<li><img src="img/5.jpg"/></li>
			</ul>
			<!--创建导航按钮-->
			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>

tools.js

//尝试创建一个可以执行简单动画的函数
/*
 * 参数:
 * 	obj:要执行动画的对象
 * 	attr:要执行动画的样式,比如:left top width height
 * 	target:执行动画的目标位置
 * 	speed:移动的速度(正数向右移动,负数向左移动)
 *  callback:回调函数,这个函数将会在动画执行完毕以后执行
 */
function move(obj, attr, target, speed, callback) {
	//关闭上一个定时器
	clearInterval(obj.timer);

	//获取元素目前的位置
	var current = parseInt(getStyle(obj, attr));

	//判断速度的正负值
	//如果从0 向 800移动,则speed为正
	//如果从800向0移动,则speed为负
	if(current > target) {
		//此时速度应为负值
		speed = -speed;
	}

	//开启一个定时器,用来执行动画效果
	//向执行动画的对象中添加一个timer属性,用来保存它自己的定时器的标识
	obj.timer = setInterval(function() {

		//获取box1的原来的left值
		var oldValue = parseInt(getStyle(obj, attr));

		//在旧值的基础上增加
		var newValue = oldValue + speed;

		//判断newValue是否大于800
		//从800 向 0移动
		//向左移动时,需要判断newValue是否小于target
		//向右移动时,需要判断newValue是否大于target
		if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
			newValue = target;
		}

		//将新值设置给box1
		obj.style[attr] = newValue + "px";

		//当元素移动到0px时,使其停止执行动画
		if(newValue == target) {
			//达到目标,关闭定时器
			clearInterval(obj.timer);
			//动画执行完毕,调用回调函数,
			callback && callback(); //有就调用回调函数,没有就不调用
		}

	}, 30);
}

/*
 * 定义一个函数,用来获取指定元素的当前的样式
 * 参数:
 * 		obj 要获取样式的元素
 * 		name 要获取的样式名
 */
function getStyle(obj, name) {

	if(window.getComputedStyle) {
		//正常浏览器的方式,具有getComputedStyle()方法
		return getComputedStyle(obj, null)[name];
	} else {
		//IE8的方式,没有getComputedStyle()方法
		return obj.currentStyle[name];
	}
}

01.轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			/*
			 * 设置outer的样式
			 */
			#outer{
				/*设置宽和高*/
				width: 520px;
				height: 333px;
				/*居中*/
				margin: 50px auto;
				/*设置背景颜色*/
				background-color: greenyellow;
				/*设置padding*/
				padding: 10px 0;
				/*开启相对定位*/
				position: relative;
				/*裁剪溢出的内容*/
				overflow: hidden;
			}
			
			/*设置imgList*/
			#imgList{
				/*去除项目符号*/
				list-style: none;
				/*设置ul的宽度*/
				/*width: 2600px;*/
				/*开启绝对定位*/
				position: absolute;
				/*设置偏移量*/
				/*
				 * 每向左移动520px,就会显示到下一张图片
				 */
				left: 0px;
			}
			
			/*设置图片中的li*/
			#imgList li{
				/*设置浮动*/
				float: left;
				/*设置左右外边距*/
				margin: 0 10px;
			}
			
			/*设置导航按钮*/
			#navDiv{
				/*开启绝对定位*/
				position: absolute;
				/*设置位置*/
				bottom: 15px;
				/*设置left值
				 	outer宽度  520
				 	navDiv宽度 25*5 = 125
				 		520 - 125 = 395/2 = 197.5
				 * */
				/*left: 197px;*/
			}
			
			#navDiv a{
				/*设置超链接浮动*/
				float: left;
				/*设置超链接的宽和高*/
				width: 15px;
				height: 15px;
				/*设置背景颜色*/
				background-color: red;
				/*设置左右外边距*/
				margin: 0 5px;
				/*设置透明*/
				opacity: 0.5;
				/*兼容IE8透明*/
				filter: alpha(opacity=50);
			}
			
			/*设置鼠标移入的效果*/
			#navDiv a:hover{
				background-color: black;
			}
		</style>
		
		<!--引用工具-->
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				//获取imgList
				var imgList = document.getElementById("imgList");
				//获取页面中所有的img标签
				var imgArr = document.getElementsByTagName("img");
				//设置imgList的宽度
				imgList.style.width = 520*imgArr.length+"px";
				
				
				/*设置导航按钮居中*/
				//获取navDiv
				var navDiv = document.getElementById("navDiv");
				//获取outer
				var outer = document.getElementById("outer");
				//设置navDiv的left值
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
				
				//默认显示图片的索引
				var index = 0;
				//获取所有的a
				var allA = document.getElementsByTagName("a");
				//设置默认选中的效果
				allA[index].style.backgroundColor = "black";
				
				/*
				 	点击超链接切换到指定的图片
				 		点击第一个超链接,显示第一个图片
				 		点击第二个超链接,显示第二个图片
				 * */
				
				//为所有的超链接都绑定单击响应函数
				for(var i=0; i<allA.length ; i++){
					
					//为每一个超链接都添加一个num属性
					allA[i].num = i;
					
					//为超链接绑定单击响应函数
					allA[i].onclick = function(){
						
						//关闭自动切换的定时器,这是为了当用户点击某张图片后,停止自动切换的动作,
                        //不这样的话,会两个动作一起作用,效果不好
						clearInterval(timer);
						//获取点击超链接的索引,并将其设置为index
						index = this.num;
						
						//切换图片
						/*
						 * 第一张  0 0
						 * 第二张  1 -520
						 * 第三张  2 -1040
						 */
						//imgList.style.left = -520*index + "px";
						//设置选中的a
						setA();
						
						//使用move函数来切换图片
						move(imgList , "left" , -520*index , 20 , function(){
							//动画执行完毕,开启自动切换,是为了用户点击某一张图片这动作执行完后还会自动轮播
							autoChange();
						});
						
					};
				}
								
				//开启自动切换图片
				autoChange();
								
				//创建一个方法用来设置选中的a
				function setA(){					
					//判断当前索引是否是最后一张图片
					if(index >= imgArr.length - 1){
						//则将index设置为0
						index = 0;
						
						//此时显示的最后一张图片,而最后一张图片和第一张是一摸一样
						//通过CSS将最后一张切换成第一张,即马上切换到第一张
						imgList.style.left = 0;
					}
					
					//遍历所有a,并将它们的背景颜色设置为红色
					for(var i=0 ; i<allA.length ; i++){
						allA[i].style.backgroundColor = "";
					}
					
					//将选中的a设置为黑色
					allA[index].style.backgroundColor = "black";
				};
				
				//定义一个自动切换的定时器的标识
				var timer;
				//创建一个函数,用来开启自动切换图片
				function autoChange(){					
					//开启一个定时器,用来定时去切换图片
					timer = setInterval(function(){						
						//使索引自增
						index++;						
						//判断index的值
						index %= imgArr.length;					
						//执行动画,切换图片
						move(imgList , "left" , -520*index , 20 , function(){
							//修改导航按钮,让导航按钮也跟着自动变色
							setA();
						});						
					},3000);					
				}							
			};			
		</script>
	</head>
	<body>
		<!-- 创建一个外部的div,来作为大的容器 -->
		<div id="outer">
			<!-- 创建一个ul,用于放置图片 -->
			<ul id="imgList">
				<li><img src="img/1.jpg"/></li>
				<li><img src="img/2.jpg"/></li>
				<li><img src="img/3.jpg"/></li>
				<li><img src="img/4.jpg"/></li>
				<li><img src="img/5.jpg"/></li>
				<li><img src="img/1.jpg"/></li>
			</ul>
			<!--创建导航按钮-->
			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>

02.类的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			.b2{
				height: 300px;
				background-color: yellow;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				//获取box
				var box = document.getElementById("box");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//为btn01绑定单击响应函数
				btn01.onclick = function(){
					//修改box的样式
					/*
					 * 通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面
					 * 	这样的执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便
					 */
					/*box.style.width = "200px";
					box.style.height = "200px";
					box.style.backgroundColor = "yellow";*/
					
					/*
					 * 我希望一行代码,可以同时修改多个样式
					 */
					
					//修改box的class属性
					/*
					 * 我们可以通过修改元素的class属性来间接的修改样式
					 * 这样一来,我们只需要修改一次,即可同时修改多个样式,
					 * 	浏览器只需要重新渲染页面一次,性能比较好,
					 * 	并且这种方式,可以使表现和行为进一步的分离
					 */
					//box.className += " b2";    b2前面有个空格是不让其变为字符串相加,
                    //这样表示这个有b1和b2,即class="b1 b2"
                    
                    //在这个元素的class里面对b2进行添加,如果有就不会重复添加b2
					//addClass(box,"b2");     
					 
					//alert(hasClass(box,"hello"));
					
                    //在这个元素的class里面对b2进行删除
					//removeClass(box,"b2");  
					
                    //在这个元素的class里面对b2进行有就删除,没有就添加
					toggleClass(box,"b2");  
				};
				
			};
			
			//定义一个函数,用来向一个元素中添加指定的class属性值,注意这里要有判断是
            //否有这个类,(即下方定义的hasClass),
            
			//如果不判断的话,点一次就会添加一次这个类,虽然对浏览器显示没影响,
            //但是会存在多个这样的类即 class="b1 b2 b2 b2"
			/*
			 * 参数:
			 * 	obj 要添加class属性的元素
			 *  cn 要添加的class值
			 * 	
			 */
			function addClass(obj , cn){
				
				//检查obj中是否含有cn,没有就加,有就不管
				if(!hasClass(obj , cn)){
					obj.className += " "+cn;
				}
				
			}
			
			/*
			 * 判断一个元素中是否含有指定的class属性值
			 * 	如果有该class,则返回true,没有则返回false
			 * 	
			 */
			function hasClass(obj , cn){
				
				//判断obj中有没有cn class
				//创建一个正则表达式
				//var reg = /\bb2\b/;
				var reg = new RegExp("\\b"+cn+"\\b");
				
				return reg.test(obj.className);
				
			}
			
			/*
			 * 删除一个元素中的指定的class属性
			 */
			function removeClass(obj , cn){
				//创建一个正则表达式
				var reg = new RegExp("\\b"+cn+"\\b");
				
				//删除class
				obj.className = obj.className.replace(reg , "");  //用空串代替reg 				
			}
			
			/*
			 * toggleClass可以用来切换一个类
			 * 	如果元素中具有该类,则删除
			 * 	如果元素中没有该类,则添加
			 */
			function toggleClass(obj , cn){
				
				//判断obj中是否含有cn
				if(hasClass(obj , cn)){
					//有,则删除
					removeClass(obj , cn);
				}else{
					//没有,则添加
					addClass(obj , cn);
				}				
			}			
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后修改box的样式</button>
		
		<br /><br />
		
		<div id="box" class="b1 b2"></div>
	</body>
</html>

03.二级菜单

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>二级菜单</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			
			a,img {
				border: 0;
				text-decoration: none;
			}
			
			body {
				font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
			}
		</style>

		<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
		
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				
				/*
				 * 我们的每一个菜单都是一个div
				 * 	当div具有collapsed这个类时,div就是折叠的状态
				 * 	当div没有这个类时,div就是展开的状态
				 */
				
				/*
				 * 点击菜单,切换菜单的显示状态
				 */
				//获取所有的class为menuSpan的元素
				var menuSpan = document.querySelectorAll(".menuSpan");
				
				//定义一个变量,来保存当前打开的菜单
				var openDiv = menuSpan[0].parentNode;
				
				//为span绑定单击响应函数
				for(var i=0 ; i<menuSpan.length ; i++){
					menuSpan[i].onclick = function(){
						
						//this代表我当前点击的span
						//获取当前span的父元素
						var parentDiv = this.parentNode;
						
						//切换菜单的显示状态,表示有就删除,没有就添加
						toggleMenu(parentDiv);
						
						
						//判断openDiv和parentDiv是否相同
						if(openDiv != parentDiv  && !hasClass(openDiv , "collapsed")){
							//打开菜单以后,应该关闭之前打开的菜单
							//为了可以统一处理动画过渡效果,我们希望在这将addClass改为toggleClass
							//addClass(openDiv , "collapsed");
							//此处toggleClass()不需要有移除的功能
							//toggleClass(openDiv , "collapsed");
							//切换菜单的显示状态
							toggleMenu(openDiv);
						}
						
						//修改openDiv为当前打开的菜单
						openDiv = parentDiv;
						
					};
				}
				
				/*
				 * 用来切换菜单折叠和显示状态
				 */
				function toggleMenu(obj){
					//在切换类之前,获取元素的高度
					var begin = obj.offsetHeight;
					
					//切换parentDiv的显示
					toggleClass(obj , "collapsed");
					
					//在切换类之后获取一个高度
					var end = obj.offsetHeight;
					
					//console.log("begin = "+begin +" , end = "+end);
					//动画效果就是将高度从begin向end过渡
					//将元素的高度重置为begin
					obj.style.height = begin + "px";
					
					//执行动画,从bengin向end过渡
					move(obj,"height",end,10,function(){
						//动画执行完毕,内联样式已经没有存在的意义了,删除之,
                        //不删的话就只能点第一次的时候有用,第二次点的时候就没有作用了
						obj.style.height = "";
					});						
				}								
			};
						
		</script>		
	</head>
	<body>
		<div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">在线工具</span>
				<a href="#">图像优化</a>
				<a href="#">收藏夹图标生成器</a>
				<a href="#">邮件</a>
				<a href="#">htaccess密码</a>
				<a href="#">梯度图像</a>
				<a href="#">按钮生成器</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">支持我们</span>
				<a href="#">推荐我们</a>
				<a href="#">链接我们</a>
				<a href="#">网络资源</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">合作伙伴</span>
				<a href="#">JavaScript工具包</a>
				<a href="#">CSS驱动</a>
				<a href="#">CodingForums</a>
				<a href="#">CSS例子</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">测试电流</span>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
			</div>
		</div>
	</body>
</html>

04.JSON

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--
			如果需要兼容IE7及以下的JSON操作,则可以通过引入一个外部的js文件来处理
		-->
		<script type="text/javascript" src="js/json2.js"></script>
		<script type="text/javascript">
			
			/*
			 * JSON
			 * 	- JS中的对象只有JS自己认识,其他的语言都不认识
			 * 	- JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别,
			 * 		并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互(不同语言之间)
			 * 	- JSON
			 * 		- JavaScript Object Notation JS对象表示法   
			          json称为js对象标识,是为了给其他语言识别的一种js包装对象的手段
			          
			 * 		- JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号(不能单引号)
			 * 			其他的和JS语法一致
			 * 		JSON分类:
			 * 			1.对象 {}
			 * 			2.数组 []
			 * 
			 * 		JSON中允许的值:
			 * 			1.字符串
			 * 			2.数值
			 * 			3.布尔值
			 * 			4.null
			 * 			5.(普通)对象(不能有函数对象)
			 * 			6.数组
			 *          
			 */
			
			//创建一个对象
			
			
			var arr = '[1,2,3,"hello",true]';
			
			var obj2 = '{"arr":[1,2,3]}';
			
			var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},
                       {"name":"孙悟空","age":18,"gender":"男"}]';
			
			/*
			 * 将JSON字符串转换为JS中的对象
			 * 	在JS中,为我们提供了一个工具类,就叫JSON
			 * 	这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON
			 */
			
            //数字(18)可以不加引号
			var json = '{"name":"孙悟空","age":18,"gender":"男"}';  
			
			/*
			 * json --> js对象
			 * 	 JSON.parse()
			 * 		- 可以将以JSON字符串转换为js对象
			 * 		- 它需要一个JSON字符串作为参数,会将该字符串转换为JS对象并返回
			 */
			
			var o = JSON.parse(json);
			var o2 = JSON.parse(arr);
			
			//console.log(o.gender);
			//console.log(o2[1]);     2
			
			var obj3 = {name:"猪八戒" , age:28 , gender:"男"};
			
			
			/*
			 * JS对象 ---> JSON
			 * 	JSON.stringify()
			 * 		- 可以将一个JS对象转换为JSON字符串
			 * 		- 需要一个js对象作为参数,会返回一个JSON字符串
			 */
			
			var str = JSON.stringify(obj3);
			//console.log(str);
			
			/*
			 * JSON这个对象在IE7及以下的浏览器中不支持,所以在这些浏览器中调用时会报错,
			   解决方法看直接引入外部的js文件来处理(即上方的json2.js)
			 */						
			var str3 = '{"name":"孙悟空","age":18,"gender":"男"}';
			
			JSON.parse(str3);												
		</script>
	</head>
	<body>
	</body>
</html>

05.JSON

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			var str = '{"name":"孙悟空","age":18,"gender":"男"}';
			
			/*
			 * eval()
			 * 	- 这个函数可以用来执行一段字符串形式的JS代码,并将执行结果返回
			 * 	- 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块,即 eval(str); 会报错,
			 * 		如果不希望将其当成代码块解析,则需要在字符串前后各加一个()
			 * 
			 * 	- eval()这个函数的功能很强大,可以直接执行一个字符串中的js代码,
			 * 		但是在开发中尽量不要使用,首先它的执行性能比较差,然后它还具有
			        安全隐患(例如传恶意的代码)
			 */
			
			var str2 = "alert('hello');";
			//eval(str2);    hello

			var obj = eval("("+str+")");
			
			//console.log(obj);									
		</script>
	</head>
	<body>
	</body>
</html>

源码获取

至此,我们的JavaScript入门(六)就讲解完成了。源码素材可以通过关注我的微信公众号 我爱学习呀嘻嘻 ,回复关键字JavaScript入门源码素材进行获取哦。

JavaScript入门(一)

JavaScript入门(二)

JavaScript入门(三)

JavaScript入门(四)

JavaScript入门(五)

image-20211108230322493

这篇关于JavaScript入门(六)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!