JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】

川长思鸟来 2023-01-10 03:55 90阅读 0赞

> **学习地址：**
> 
> 1.  [谷粒学院——尚硅谷][Link 1]
> 2.  [哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)][JavaScript_140_JS]
> 
> --------------------
> 
> [JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】][JavaScript_JavaScript_140_JS]

***目   录***

P124 124.尚硅谷\_JS基础\_Navigator 41:16

Window 对象属性

Navigator 对象属性

P125 125.尚硅谷\_JS基础\_History 11:21

History 对象

P126 126.尚硅谷\_JS基础\_Location 11:44

Location 对象

P127 127.尚硅谷\_JS基础\_定时器简介 17:23

Screen 对象

Window 对象

setInterval()：定时调用

clearInterval()：关闭一个定时器

P128 128.尚硅谷\_JS基础\_切换图片练习 20:53

P129 129.尚硅谷\_JS基础\_修改div移动练习 10:21

P130 130.尚硅谷\_JS基础\_延时调用 05:47

P131 131.尚硅谷\_JS基础\_定时器的应用（一） 22:33

P132 132.尚硅谷\_JS基础\_定时器的应用（二） 17:11

P133 133.尚硅谷\_JS基础\_定时器的应用（三） 20:17

各自控制各自的定时器，互不干扰

obj.style\[xxx\]和obj.style.xxx

回调函数 callback()

P134 134.尚硅谷\_JS基础\_完成轮播图界面 34:49

P135 135.尚硅谷\_JS基础\_完成点击按钮切换图片 17:08

--------------------

# P124 124.尚硅谷\_JS基础\_Navigator 41:16 #

> **BOM**
> 
>  *  浏览器对象模型。
>  *  BOM可以使我们通过JS来操作浏览器。
>  *  在BOM中为我们提供了一组对象，用来完成对浏览器的操作。
>  *  BOM对象
> 
> 1.  Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象。
> 2.  Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器。
> 3.  Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面。
> 4.  History：代表浏览器历史记录，可以通过该对象来操作浏览器的历史记录。由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页。而且该操作只在当次访问时有效。
> 5.  Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息。
> 
> 这些BOM对象（全局对象）在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。

## Window 对象属性 ##

> ![20210123181711345.png][]  浏览器对象
> 
> ![2021012318175192.png][]

### Navigator 对象属性 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

> **Navigator**
> 
> 1.  代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器。
> 2.  由于历史原因，Navigator对象中的大部分属性 都已经不能帮助我们识别浏览器了。
> 3.  一般我们只会使用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了。

> !!：!取反，两个就是反反，但是会转为布尔类型。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script type="text/javascript">
    			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
    			 */
    			// window.ActiveXObject：没有，返回undefined;ActiveXObject没有则会报错
    			if ("ActiveXObject" in window) {
    				alert("你是IE，我已经抓住你了~~~");
    			} else {
    				alert("你不是IE~~~");
    			}
    			/*alert("ActiveXObject" in window);*/
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

# P125 125.尚硅谷\_JS基础\_History 11:21 #

## History 对象 ##

> ![2021012320351912.png][]
> 
> ![2021012320360511.png][]

> 1.  length属性：获取到当成访问的链接数量
> 2.  back()：回退到上一个页面，作用和浏览器的回退按钮一样
> 3.  forward()：跳转下一个页面，作用和浏览器的前进按钮一样
> 4.  go()：可以用来跳转到指定的页面
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			console.log(history);
    			/*
    			 * 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>

# P126 126.尚硅谷\_JS基础\_Location 11:44 #

## Location 对象 ##

> ![2021012320474458.png][]
> 
> ![20210123204944504.png][]

>  *  Location：该对象中封装了浏览器的地址栏的信息。
>  *  assign()：用来跳转到其他的页面，作用和直接修改location一样。
>  *  reload()：用于重新加载当前页面，作用和刷新按钮一样。
>  *  replace()：可以使用一个新的页面替换当前页面，调用完毕也会跳转页面。
> 
> ![20210123205450817.png][]

<!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属性修改为一个完整的路径，或相对路径
    					 * 	则我们页面会自动跳转到该路径，并且会生成相应的历史记录
    					 */
    					//location = "http://www.baidu.com";
    					//location = "01.BOM.html";
    
    					/*
    					 * assign()
    					 * 	- 用来跳转到其他的页面，作用和直接修改location一样
    					 */
    					//location.assign("http://www.baidu.com");
    
    					/*
    					 * reload()
    					 * 	- 用于重新加载当前页面，作用和刷新按钮一样
    					 * 	- 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
    					 */
    					//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>

# P127 127.尚硅谷\_JS基础\_定时器简介 17:23 #

## Screen 对象 ##

> ![20210124132015706.png][]
> 
> ![20210124132051157.png][]

## Window 对象 ##

> ![2021012413250250.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]

### setInterval()：定时调用 ###

### clearInterval()：关闭一个定时器 ###

> **setInterval()**
> 
>  *  定时调用
>  *  可以将一个函数，每隔一段时间执行一次
>  *  参数：1.回调函数，该函数会每隔一段时间被调用一次；2.每次调用间隔的时间，单位是毫秒。
>  *  返回值：返回一个Number类型的数据，这个数字用来作为定时器的唯一标识。
> 
> **clearInterval()**
> 
>  *  可以用来关闭一个定时器，方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]

<!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>

# P128 128.尚硅谷\_JS基础\_切换图片练习 20:53 #

> ![20210124135417168.png][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

<!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 %= imgArr.length;
    						//修改img1的src属性
    						img1.src = imgArr[index];
    
    					}, 1000);
    				};
    
    				//为btn02绑定一个单击响应函数
    				var btn02 = document.getElementById("btn02");
    				btn02.onclick = function() {
    					//点击按钮以后，停止图片的自动切换，关闭定时器
    					/*
    					 * clearInterval()可以接收任意参数，
    					 * 	如果参数是一个有效的定时器的标识，则停止对应的定时器
    					 * 	如果参数不是一个有效的标识，则什么也不做
    					 */
    					clearInterval(timer);
    				};
    			};
    		</script>
    	</head>
    	<body>
    		<img id="img1" src="img/1.jpg" />
    		<br /><br />
    		<button id="btn01">开始</button>
    		<button id="btn02">停止</button>
    	</body>
    </html>

# P129 129.尚硅谷\_JS基础\_修改div移动练习 10:21 #

> 使用“定时器”解决方块移动卡顿问题。总思路：将方向、速度分开控制。键盘控制方向，速度由定时器控制。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]

<!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 = 50;
    					} else {
    						speed = 10;
    					}
    					//使dir等于按键的值
    					dir = event.keyCode;
    				};
    				//当按键松开时，div不再移动
    				document.onkeyup = function() {
    					//设置方向为0
    					dir = 0;
    				};
    			};
    		</script>
    	</head>
    	<body>
    		<div id="box1"></div>
    	</body>
    </html>

# P130 130.尚硅谷\_JS基础\_延时调用 05:47 #

> **延时调用**
> 
>  *  延时调用一个函数不马上执行，而是隔一段时间以后再执行，而且只会执行一次。
>  *  延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次。
>  *  延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]

# P131 131.尚硅谷\_JS基础\_定时器的应用（一） 22:33 #

> parseInt()：将字符串中的合法数字提取出来。
> 
> ![20210124145821431.png][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]

> ![20210124150058764.png][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]

# P132 132.尚硅谷\_JS基础\_定时器的应用（二） 17:11 #

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10][]

# P133 133.尚硅谷\_JS基础\_定时器的应用（三） 20:17 #

## 各自控制各自的定时器，互不干扰 ##

> ![20210124153633677.png][]

## obj.style\[xxx\]和obj.style.xxx ##

> 原文链接：[https://www.jianshu.com/p/1e73b8e1b31d][https_www.jianshu.com_p_1e73b8e1b31d]   **常量用点，变量就用中括号。.有限制，\[\]可以操作特殊属性名。**

## 回调函数 callback() ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11][]
> 
> ![20210124155220560.png][]

<!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;
    			}
    			#bigBox {
    				width: 0;
    				height: 1000px;
    				border-left: 1px black solid;
    				position: absolute;
    				left: 800px;
    				top: 0;
    			}
    		</style>
    		
    		<script type="text/javascript">
    			//尝试创建一个可以执行简单动画的函数
    			/*
    			 * 参数：
    			 * 	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];
    				}
    			}
    
    			window.onload = function() {
    				//获取box1
    				var box1 = document.getElementById("box1");
    				//获取btn01
    				var btn01 = document.getElementById("btn01");
    				//获取btn02
    				var btn02 = document.getElementById("btn02");
    				//获取btn03
    				var btn03 = document.getElementById("btn03");
    
    				//点击按钮以后，使box1向右移动（left值增大）
    				btn01.onclick = function() {
    					move(box1, "left", 800, 20);
    				};
    
    				//点击按钮以后，使box1向左移动（left值减小）
    				btn02.onclick = function() {
    					move(box1, "left", 0, 10);
    				};
    
    				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() {
    								});
    							});
    						});
    					});
    				};
    			};
    
    			//定义一个变量，用来保存定时器的标识 // var timer;
    			/*
    			 * 目前我们的定时器的标识由全局变量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 id="bigBox"></div>
    	</body>
    </html>

# P134 134.尚硅谷\_JS基础\_完成轮播图界面 34:49 #

> overflow：hidden以后，横向超出框的部分被裁剪以后就不占其他元素的位置了。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13][]

> ![20210124162916471.png][]

# P135 135.尚硅谷\_JS基础\_完成点击按钮切换图片 17:08 #

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14][]
> 
> 可以直接在css样式ul列表里面加个transition: all .5s（.5s为过度动画时间，自己可以随便改）。

<!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: 10px 0; /*设置padding*/
    				position: relative; /*开启相对定位*/
    				overflow: hidden; /*裁剪溢出的内容*/
    			}
    			#imgList { /*设置imgList*/
    				list-style: none; /*去除项目符号*/
    				/*设置ul的宽度*/
    				/*width: 2600px;*/
    				position: absolute; /*开启绝对定位*/
    				/* 每向左移动520px，就会显示到下一张图片 */
    				left: 0px; /*设置偏移量*/
    			}
    			#imgList li { /*设置图片中的li*/
    				float: left; /*设置浮动*/
    				margin: 0 10px; /*设置左右外边距*/
    			}
    			#navDiv { /*设置导航按钮*/
    				position: absolute; /*开启绝对定位*/
    				bottom: 15px; /*设置位置*/
    				/*设置left值
    				 	outer宽度  520
    				 	navDiv宽度 25*5 = 125
    				 		(520 - 125)/2 = 395/2 = 197.5
    				 * */
    				/*left: 197px;*/
    			}
    			#navDiv a {
    				float: left; /*设置超链接浮动*/
    				width: 15px; /*设置超链接的宽和高*/
    				height: 15px;
    				background-color: red; /*设置背景颜色*/
    				margin: 0 5px; /*设置左右外边距*/
    				opacity: 0.5; /*设置透明*/
    				filter: alpha(opacity=50);/*兼容IE8透明*/
    			}
    			#navDiv a:hover { /*设置鼠标移入的效果*/
    				background-color: black;
    			}
    		</style>
    		
    		
    		<script type="text/javascript">
    			//尝试创建一个可以执行简单动画的函数
    			/*
    			 * 参数：
    			 * 	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];
    				}
    			}
    
    			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() {
    						//获取点击超链接的索引,并将其设置为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() {
    						});
    					};
    				}
    
    				//创建一个方法用来设置选中的a
    				function setA() {
    					//遍历所有a，并将它们的背景颜色设置为红色
    					for (var i = 0; i < allA.length; i++) {
    						allA[i].style.backgroundColor = "";
    					}
    					//将选中的a设置为黑色
    					allA[index].style.backgroundColor = "black";
    				};
    			};
    		</script>
    	</head>
    	<body>
    		
    		<div id="outer">
    			
    			<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>

> 加油，冲冲冲~   相信自己，改善自己~

[Link 1]: http://www.gulixueyuan.com/my/course/58
[JavaScript_140_JS]: https://www.bilibili.com/video/BV1YW411T7GX
[JavaScript_JavaScript_140_JS]: https://blog.csdn.net/weixin_44949135/article/details/108621932
[20210123181711345.png]: /images/20221119/aef065a271c14097b3c7261beba38015.png
[2021012318175192.png]: /images/20221119/c28a6c06476f47d6b07a912aeb14ff3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221119/4260b863f68c4cb8ae0e27823ae74af0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221119/721a9d0bef6e4a18b6360995dc1c19af.png
[2021012320351912.png]: /images/20221119/fc3d624de87646e38bab111a40a42ad0.png
[2021012320360511.png]: /images/20221119/f991976ae86142978033f623fed5cb0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221119/80ee45b007e647f1a9629b5030c7a208.png
[2021012320474458.png]: /images/20221119/4aaf47e658e047ce84b4280db2e0b3bf.png
[20210123204944504.png]: /images/20221119/0ede3cb2007a4361b8fd435d3f9fec9d.png
[20210123205450817.png]: /images/20221119/8fec00e98e7544d1aa345c73f3b94b0d.png
[20210124132015706.png]: /images/20221119/80c6a85c33f84a2a8407e6669d613da9.png
[20210124132051157.png]: /images/20221119/d25a188e43fa493495e5a178f718af66.png
[2021012413250250.png]: /images/20221119/c66f1824cc6e4e928ac7e17748e26226.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221119/29a1369763e243fabaf1c4968125a5b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221119/b4bb33263a5d431789f29a94b1bbe615.png
[20210124135417168.png]: /images/20221119/ed6ae906ac4b470c8d27e256406c2017.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221119/6db7ce31312e4c4eb2dbcd5c5b0b7fb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221119/1d9187dce78247fea69aed13d4d4c839.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221119/738aef422102452886f02816cd0ac9d1.png
[20210124145821431.png]: /images/20221119/1272e2c603594674bc0763e51348342f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: /images/20221119/617374686cd54ea384085801139dc82a.png
[20210124150058764.png]: https://img-blog.csdnimg.cn/20210124150058764.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: /images/20221119/005241b0f9c74e7c95ac1e9a279c57b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10]: /images/20221119/6218b6fff3534b19a4efcc7b236b1411.png
[20210124153633677.png]: /images/20221119/2d1c41d520b341f9aa334db7b452fc7f.png
[https_www.jianshu.com_p_1e73b8e1b31d]: https://www.jianshu.com/p/1e73b8e1b31d
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11]: /images/20221119/0a41ea15cff4460fad311e249bf697be.png
[20210124155220560.png]: /images/20221119/b9702ab8b04945df87bfe84169633bf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12]: /images/20221119/3499269849024fa7b3dd24e49fa12a1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13]: /images/20221119/63e6f0fbb0ef4e2c8972865dc4e2cd60.png
[20210124162916471.png]: /images/20221119/3f7543e2ef8c49d7b864826993b7e4a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14]: /images/20221119/825a78a2edf242e4abd844e64d339ea9.png