16.JS基礎的學習——16day

文章目錄

1.BOM的基本概念（對浏覽器的操作）

2.History和Location

3.方向鍵控制盒子的移動

4.定時器簡介

5.輪播圖的實作

6.延時調用

7.定時器的應用1

8.定時器的應用2向右

9.定時器的練習答案

10.定時器的應用1

11.定時器的應用2

12.測試練習

1.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(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>
		
	</body>
</html>

2.History和Location

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * History
			 * 	   - 對象可以用來操作浏覽器向前或向後翻頁
			 * 
			 * 
			 * length
			 * 	- 屬性，可以擷取到目前通路的連結數量(關閉頁面就沒有了)
			 * 
			 */
			//alert(history.length);
			
			window.onload = function(){
				
				var btn01 = document.getElementById("btn01");
				
				btn01.onclick = function(){
					
					/*
					 * back()
					 * 	 - 可以用來回退到上一個頁面，作用和浏覽器的回退按鈕一樣
					 */
					//history.back();
					/*
					 * forward()()
					 * 	 - 可以用來跳轉到上一個頁面，作用和浏覽器的前進按鈕一樣
					 */
					//history.forward();
					/*
					 * go()
					 * 	  - 可以用來跳轉到制定的頁面
					 * 	  - 它需要一個整數作為參數
					 * 			1：表示向前跳轉一個頁面 相當于forward()
					 * 			2：表示向前跳轉2個頁面
					 * 			-1：表示向後跳轉1個頁面
					 * 			-2：表示向後跳轉2個頁面
					 */
					//history.go(1);
					
				}
				
				
			};
			
			
		</script>
	</head>
	<body>
		
		<button id="btn01">點我一下</button>
		
		<a href="test01.html" target="_blank" rel="external nofollow" >test1</a>
		<!--<h1>History</h1>-->
	</body>
</html>

location

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * Location
			 * 	   - 該對象封裝了浏覽器的位址欄資訊
			 * 
			 * 
			 * 
			 */
			
			
			window.onload = function(){
				
				var btn01 = document.getElementById("btn01");
				
				btn01.onclick = function(){
					//如果直接列印location，則可以擷取到位址欄的資訊(目前頁面完整路徑)
					//alert(location);
					
					/*
					 * 如果直接将location屬性修改為一個完整的路勁，或相對路徑
					 * 	  則我們頁面會自動跳轉到該路徑，并且會生成一個曆史記錄
					 * 		- 如果路徑不存在：則顯示404
					 * 
					 */
					
					//擷取到——也可以修改
					//location="https://home.firefoxchina.cn/?from=extra_start";
					//location = "01.BOM自己.html";
					//如果路徑不存在：則顯示空頁面
					//location = "hhh";
					
					/*
					 * assign()
					 * 		- 用來跳轉到其他頁面，作用和直接修改location一樣
					 */
					//location.assign("01.BOM自己.html");
					
					/*
					 * reload()
					 * 		- 用于重新加載目前頁面，作用和重新整理按鈕一樣
					 * 		- 如果方法中傳遞一個true ，作為參數，則會強制清空緩存重新整理頁面
					 * 		- 和ctrl+F5一樣
					 */
					//location.reload();文本框有值
					//location.reload(true); 文本框無值
					
					/*
					 * replace()
					 * 		- 可以使用一個新的頁面替換目前頁面，調用完畢也會跳轉頁面
					 * 			不會生成曆史記錄，不能使用回退按鈕回退
					 * 
					 */
					//location.replace("01.BOM自己.html");
				}
				
				
			};
			
			
		</script>
	</head>
	<body>
		
		<button id="btn01">點我一下</button>
		
	</body>
</html>

3.方向鍵控制盒子的移動

<!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">
			
			/*
			 * 之前在沒有加定時器之前。是方向鍵控制方向和速度
			 * 		加了定時器之後，
			 * 
			 */
			
			
			window.onload = function(){
				
				//業務邏輯：
				/* 1. 按下左鍵，box2向左走
				 * 2. 擷取左鍵
				 * 3. 擷取鍵盤事件按下onkeydown
				 * 
				 * 
				 * 上下左右38 40 37 39
				 * 
				 */
				
				//定義一個變量來控制移動的速度
				var speed = 10;
				
				//控制方向
				var bir;

				var box1 = document.getElementById("box1");
				document.onkeydown = function(event){
					//相容浏覽器
					event = event || window.event;
					
					//當按下ctrl的時候，開始變速
					if(event.ctrlKey){
						
						speed = 50;
					}else{
						//不按ctrl的時候
						speed = 10;
					}
					//使bir擷取到方向上的值
					bir = event.keyCode;
	
				};
				
				//使用定時器來控制速度
				setInterval(function(){
					
					/*
					 * 37左
					 * 38上
					 * 39右
					 * 40下
					 */
				//offsetLeft 這個是它原來的值
					switch(bir){
						case 37:
							//alert("向左");
							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.onkeyup = function(){
					
					bir = 0;
				};
				
					
			};
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

4.定時器簡介

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 
			 * 
			 * 
			 */
			window.onload = function(){
				
				//擷取count中的内容，自動切換
				/*
				 *	在JS中的程式的執行速度是非常快的
				 * 		如果希望一段程式，可以每間隔一段時間執行一次，可以使用定時調用
				 * 
				 * 
				 * 
				 */
				/*var count = document.getElementById("count");
				
				for (var i=0; i< 1000 ; i++) {
					
					count.innerHTML = i;
					
					alert("hello");
					
				}*/
				
				/*
				 * setInterval()
				 * 	  - 定時調用
				 * 	  - 可以将一個函數，每隔一段時間執行一次
				 * 	  - 參數：
				 * 			1. 回調函數，該函數會每隔一段時間被調用一次
				 * 			2. 每次調用間隔的時間，機關是毫秒
				 * 
				 * - 傳回值:
				 * 	  - setInterval()方法會傳回一個值，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>

5.輪播圖的實作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#img1{
				display: block;
				width: 1262px;
				height: 450px;
				margin-left: 125px;
				margin-top: 100px;
			}

			
			
		</style>
		<script type="text/javascript">
			/*
			 * 業務邏輯：
			 * 		1.改變圖檔就是改變src路徑代碼
			 * 		2.擷取到img
			 * 		3.擷取到src
			 * 		4.數組存放圖檔路徑
			 * 		5.周遊圖檔
			 * 		6.加上定時器
			 */
			window.onload = function(){
				
			
			var img1 = document.getElementById("img1");
			
			var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
			
			//索引自增方法
			//建立一個變量，來儲存目前圖檔的索引
			var index = 0;
			
			//建立一個變量，讓暫停按鈕可以通路
			var timer;
			
			
			//開始單擊響應函數
			var btn01 = document.getElementById("btn01");
			btn01.onclick =function(){
				
				/*
				 * 目前，我們每點選一次按鈕，就會開啟一個定時器
				 * 	  而為什麼暫停不了，那是因為每次接受的都是一個最新的值timer，
				 * 		之前的值接收不到就會一直在轉動
				 * 是以點選多次就會開啟多個定時器，這就會導緻圖檔的切換速度過快
				 * 并且我們隻能關閉最後一次開啟的定時器
				 * 
				 */
				//是以得在開啟定時器之前，關閉上一個定時器
				
				clearInterval(timer);
				

				//開啟一個定時器，來自動切換圖檔
				timer = setInterval(function(){
					
					//使索引自增
					index++;
					
			//方法一：
					//判斷索引是否超過最大索引
					/*if (index == imgs.length) {
						
						//index回到起始位置；為0
						index=0;
					}*/
			//方法二：
					//0%5=0,1%5=1,2%5=2,3%5=3,4%5=4,5%5=0
					index = index % imgs.length;
			//方法三(簡寫)：	在火狐不适用？？？？？為什麼	
					//index % = imgs.length;
					//修改img1的src屬性
					img1.src = imgs[index];
					
					
				},1000);
				
				//暫停目前頁面
				var btn02 = document.getElementById("btn02");
				
				btn02.onclick = function(){
					
					/*
					 * 目前，我們每點選一次按鈕，就會開啟一個定時器，
					 * 	 點選多次就會開啟多個定時器，這就導緻圖檔切換速度過快
					 * 	 并且我們隻能關閉最後一次開啟的定時器
					 * 
					 * 那麼怎麼解決？？？？
					 * 		在開啟定時器之前先把上一次的定時器關閉
					 */
					//點選按鈕的時候暫停頁面，即關閉定時器
					clearInterval(timer);
					
				};
			
			
			
			};
			
		};
			
		</script>
		
		
	</head>
	<body>
		<img id="img1" src="img/1.jpg"/>
		<br /><br />
		<button id="btn01">開始</button>
		<button id="btn02">暫停</button>
	</body>
</html>

6.延時調用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				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>

7.定時器的應用1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#box01{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				position: absolute;
				/*ie預設left=auto ，是以我們固定一個值給他就行*/
				left: 0;
				
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				var btn01 = document.getElementById("btn01");
				var box01 = document.getElementById("box01");
				
				var timer;
				
				
				btn01.onclick = function(){
					//每一次開啟之前都要關閉之前的，防止重複使用，速度變快
					clearInterval(timer);
					
					
					//開啟定時器
					timer = setInterval(function(){
						//擷取box01原來的left值
						//var oldValue = box01.offsetLeft;
						//靈活一些，不止使用left，還有top，width，height等
						//但是擷取的值的是0px，需要使用parseInt()取整：隻取到值的部分
						var oldValue = parseInt(getStyle(box01,"left"));
						
						//在舊值的基礎上增加
						//var newValue = oldValue + 10;
						  var newValue = oldValue + 13;
						  
						 //小技巧：讓它始終等于800
						  if(newValue > 800){
						  	newValue = 800;
						  }
						//将新值設定給box1
						box01.style.left = newValue + "px";
						
						//當到八百的時候停止，但是當10改變的時候，不一定停止了，是以，還得加一個條件
						if(newValue == 800){
							clearInterval(timer);
						}
						
						
						
						
					},30);
					
				};
				
			};
			
			
			function getStyle(obj , name){
					//正常浏覽器的方式
					//getComputedStyle(obj,null).name;寫固定了
					//return getComputedStyle(obj,null)[name];//name傳入的值
					//IE8的方式
					//return obj.currentStyle[name];
					
			//以後處理浏覽器的相容性問題的思路
					/*
					 * 說明：當if (getComputedStyle)的時候getComputedStyle浏覽器預設是一個變量
					 * 		 是以當找變量的時候，浏覽器是先在内部函數找，然後在全局函數找,都找不到的情況就會報錯
					 * 		 當是變量etComputedStyle的時候，就去作用域中尋找，沒找到就會報錯；
					 * 		 當是全局屬性的時候window.getComputedStyle ，沒找到就會報一個undefined
					 * 		 是以確定window.getComputedStyle為真
					 * 
					 */
					if (window.getComputedStyle) {
						//正常浏覽器的方式，具有getComputedStyle()方法
						return getComputedStyle(obj,null)[name];
					}else{
						//IE8的方式
						return obj.currentStyle[name];
					}
					
					
					//當ie11以上的時候，我們本是想優先使用getComputedStyle
					//但是這一種方式肯定會先使用currentStyle，是以有點小瑕疵
					/*if (obj.currentStyle) {
						//IE8的方式
						return obj.currentStyle[name];
					}else{
						//正常浏覽器的方式，具有getComputedStyle()方法
						return getComputedStyle(obj,null)[name];
					}*/
					
					
					
					
					
					
					
					
				}
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		</script>
	
	</head>
	<body>
		
		<button id="btn01">點一下我就向右移動</button>
		<br /><br />
		<div id="box01"></div>
		<div style="width: 0px; height: 1000px; border-left: 2px red solid; position: absolute; left: 800px; top：0;"></div>
	</body>
</html>

8.定時器的應用2向右

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#box01{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				position: absolute;
				/*ie預設left=auto ，是以我們固定一個值給他就行*/
				left: 0;
				
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				var box01 = document.getElementById("box01");
				
				
				
				
				btn01.onclick = function(){
					move(box01,800,10);
					
				};
	
				btn02.onclick = function(){
				
				move(box01,0,10);
				
			};
			
		};
			var timer;//注意這裡
			
			function getStyle(obj , name){
					if (window.getComputedStyle) {
						//正常浏覽器的方式，具有getComputedStyle()方法
						return getComputedStyle(obj,null)[name];
					}else{
						//IE8的方式
						return obj.currentStyle[name];
					}
					
				}
			
			//封裝成一個函數
			/*
			 * 參數：
			 * 		obj 對象
			 * 		target 到達目标
			 * 		speed 速度
			 */
			
			function move(obj , target , speed){
				//每一次開啟之前都要關閉之前的，防止重複使用，速度變快
					clearInterval(timer);
					
					/*
					 * 不應該讓使用者去判斷，而是，讓程式員判斷
					 */
					var crruent = parseInt(getStyle(obj,"left"));
					
					if (crruent > target) {
						//把負值變為正值
						//把正值變負值
						speed = -speed;
					}
					
					//開啟定時器
					timer = setInterval(function(){
						//擷取box01原來的left值
						//var oldValue = box01.offsetLeft;
						//靈活一些，不止使用left，還有top，width，height等
						//但是擷取的值的是0px，需要使用parseInt()取整：隻取到值的部分
						var oldValue = parseInt(getStyle(obj,"left"));
						
						//在舊值的基礎上增加
						  var newValue = oldValue + speed;
						 //小技巧：讓它始終等于800
						  if((speed > 0 && newValue > target) || (speed < 0 && newValue < target )){
						  	newValue = target;
						  }
						//将新值設定給box1
						obj.style.left = newValue + "px";
						
						//當到八百的時候停止，但是當10改變的時候，不一定停止了，是以，還得加一個條件
						if(newValue == target){
							clearInterval(timer);
						}
						
					},30);
				
				
			}
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		</script>
	
	</head>
	<body>
		
		<button id="btn01">點一下我就向右移動</button>
		<button id="btn02">點一下我就向左移動</button>
		<br /><br />
		<div id="box01"></div>
		<div style="width: 0px; height: 1000px; border-left: 2px red solid; position: absolute; left: 800px; top：0;"></div>
	</body>
</html>

9.定時器的練習答案

<!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值增大）
				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.定時器的應用1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#box01{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				position: absolute;
				/*ie預設left=auto ，是以我們固定一個值給他就行*/
				left: 0;
				
			}
			
			#box02{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				/*ie預設left=auto ，是以我們固定一個值給他就行*/
				left: 0;
				top: 200px;
				
			}
			
			
			
			
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				var box01 = document.getElementById("box01");
				//黃盒子
				var box02 = document.getElementById("box02");
				var btn03 = document.getElementById("btn03");
				//實作更多功能
				var btn04 = document.getElementById("btn04");
				var btn05 = document.getElementById("btn05");
				var btn06 = document.getElementById("btn06");
				
				var btn07 = document.getElementById("btn07");
				var btn08 = document.getElementById("btn08");
				
				
				btn01.onclick = function(){
					move(box01,"left",800,10);
					
				};
	
				btn02.onclick = function(){
				
				move(box01,"left",0,10);
				
				};
			
				btn03.onclick = function(){
				
				move(box02,"left",800,10);
				
				};
			
			//實作更多的功能: 長度   top
			
				btn04.onclick = function(){
					
					move(box02,"left",0,10);
					
				};	
			
			
				btn05.onclick = function(){
						
						move(box02,"top",0,10);
						
				};
			
				btn06.onclick = function(){
						
						move(box02,"top",500,10);
						
				};
					
					
				/*yellow長度變長*/
				btn07.onclick = function(){
						
						move(box02,"width",800,10);
						
				};
				
				btn08.onclick = function(){
						
						move(box02,"height",800,10);
						
				};
				
				var btn09 = document.getElementById("btn09");
				
				btn09.onclick = function(){
						
						move(box02,"width",800,10 , function(){
							
							move(box02,"height",400,10,function(){
								
								
								
							});
						});
						
				};
				
			
		};
				
		</script>
		
		<script type="text/javascript" src="js/tools.js"></script>
	
	</head>
	<body>
		
		<button id="btn01">點一下我就向右移動</button>
		<button id="btn02">點一下我就向左移動</button>
		<button id="btn03">點一下我yellow就向右移動</button>
		<button id="btn04">點一下我yellow就向左移動</button>
		
		<button id="btn05">點一下我yellow就向上移動</button>
		<button id="btn06">點一下我yellow就向下移動</button>
		
		<button id="btn07">點一下我yellow就向左變長</button>
		<button id="btn08">點一下我yellow就向下變長</button>
		
		<button id="btn09"><h1>TEST</h1></button>
		
		
		<br /><br />
		<div id="box01"></div>
		<div id="box02"></div>
		<div style="width: 0px; height: 1000px; border-left: 2px red solid; position: absolute; left: 800px; top：0;"></div>
	</body>
</html>

11.定時器的應用2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#box01{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				position: absolute;
				/*ie預設left=auto ，是以我們固定一個值給他就行*/
				left: 0;
				
			}
			
			#box02{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				/*ie預設left=auto ，是以我們固定一個值給他就行*/
				left: 0;
				top: 200px;
				
			}
			
			
			
			
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				var box01 = document.getElementById("box01");
				//黃盒子
				var box02 = document.getElementById("box02");
				var btn03 = document.getElementById("btn03");
				//實作更多功能
				var btn04 = document.getElementById("btn04");
				var btn05 = document.getElementById("btn05");
				var btn06 = document.getElementById("btn06");
				
				var btn07 = document.getElementById("btn07");
				var btn08 = document.getElementById("btn08");
				
				
				btn01.onclick = function(){
					move(box01,"left",800,10);
					
				};
	
				btn02.onclick = function(){
				
				move(box01,"left",0,10);
				
				};
			
				btn03.onclick = function(){
				
				move(box02,"left",800,10);
				
				};
			
			//實作更多的功能: 長度   top
			
				btn04.onclick = function(){
					
					move(box02,"left",0,10);
					
				};	
			
			
				btn05.onclick = function(){
						
						move(box02,"top",0,10);
						
				};
			
				btn06.onclick = function(){
						
						move(box02,"top",500,10);
						
				};
					
					
				/*yellow長度變長*/
				btn07.onclick = function(){
						
						move(box02,"width",800,10);
						
				};
				
				btn08.onclick = function(){
						
						move(box02,"height",800,10);
						
				};
				
				var btn09 = document.getElementById("btn09");
				
				btn09.onclick = function(){
						
						move(box02,"width",800,10 , function(){
							
							move(box02,"height",400,10,function(){
								
								
								
							});
						});
						
				};
				
			
			
			
		};
		
		
			
			function getStyle(obj , name){
					if (window.getComputedStyle) {
						//正常浏覽器的方式，具有getComputedStyle()方法
						return getComputedStyle(obj,null)[name];
					}else{
						//IE8的方式
						return obj.currentStyle[name];
					}
					
				}
			
		
			/*
			 * 	當龜兔賽跑的時候，我們可以不适應用全局變量了，
			 * 	因為都執行一個相同的函數，定時器一開始就暫停
			 * 
			 * 	怎麼解決？？？
			 * 		那就找到唯一辨別obj.timer
			 * 		這樣就是各自帶各自的定時器了
			 */
			//var timer;//注意這裡
			//封裝成一個函數
			/*
			 * 參數：
			 * 		obj 對象
			 * 		attr 屬性
			 * 		target 到達目标
			 * 		speed 速度
			 * 
			 * 		callback回調函數（續上無限可能）
			 */
			
			function move(obj ,attr, target , speed, callback){
				//每一次開啟之前都要關閉之前的，防止重複使用，速度變快
					clearInterval(obj.timer);
					
					/*
					 * 不應該讓使用者去判斷，而是，讓程式員判斷
					 */
					var crruent = parseInt(getStyle(obj,attr));
					
					if (crruent > target) {
						//把負值變為正值
						//把正值變負值
						speed = -speed;
					}
					
					//開啟定時器
					obj.timer = setInterval(function(){
						//擷取box01原來的left值
						//var oldValue = box01.offsetLeft;
						//靈活一些，不止使用left，還有top，width，height等
						//但是擷取的值的是0px，需要使用parseInt()取整：隻取到值的部分
						var oldValue = parseInt(getStyle(obj,attr));
						
						//在舊值的基礎上增加
						  var newValue = oldValue + speed;
						 //小技巧：讓它始終等于800
						  if((speed > 0 && newValue > target) || (speed < 0 && newValue < target )){
						  	newValue = target;
						  }
						//将新值設定給box1
						obj.style[attr] = newValue + "px";
						
						//當到八百的時候停止，但是當10改變的時候，不一定停止了，是以，還得加一個條件
						if(newValue == target){
							
							clearInterval(obj.timer);
							
							//當函數定時器結束的時候，調用回調函數
							//callback();
							//當有回調函數的時候才有，不會導緻不調用的出現undefined
							callback && callback();
							
						}
						
					},30);
				
				
			}
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		</script>
	
	</head>
	<body>
		
		<button id="btn01">點一下我就向右移動</button>
		<button id="btn02">點一下我就向左移動</button>
		<button id="btn03">點一下我yellow就向右移動</button>
		<button id="btn04">點一下我yellow就向左移動</button>
		
		<button id="btn05">點一下我yellow就向上移動</button>
		<button id="btn06">點一下我yellow就向下移動</button>
		
		<button id="btn07">點一下我yellow就向左變長</button>
		<button id="btn08">點一下我yellow就向下變長</button>
		
		<button id="btn09"><h1>TEST</h1></button>
		
		
		<br /><br />
		<div id="box01"></div>
		<div id="box02"></div>
		<div style="width: 0px; height: 1000px; border-left: 2px red solid; position: absolute; left: 800px; top：0;"></div>
	</body>
</html>

12.測試練習

js子產品的封裝

function getStyle(obj , name){
			if (window.getComputedStyle) {
				//正常浏覽器的方式，具有getComputedStyle()方法
				return getComputedStyle(obj,null)[name];
			}else{
				//IE8的方式
				return obj.currentStyle[name];
				}
					
			}
			/*
			 * 	當龜兔賽跑的時候，我們可以不适應用全局變量了，
			 * 	因為都執行一個相同的函數，定時器一開始就暫停
			 * 
			 * 	怎麼解決？？？
			 * 		那就找到唯一辨別obj.timer
			 * 		這樣就是各自帶各自的定時器了
			 */
			//var timer;//注意這裡
			//封裝成一個函數
			/*
			 * 參數：
			 * 		obj 對象
			 * 		attr 屬性
			 * 		target 到達目标
			 * 		speed 速度
			 * 
			 * 		callback回調函數（續上無限可能）
			 */
			
			function move(obj ,attr, target , speed, callback){
				//每一次開啟之前都要關閉之前的，防止重複使用，速度變快
					clearInterval(obj.timer);
					
					/*
					 * 不應該讓使用者去判斷，而是，讓程式員判斷
					 */
					var crruent = parseInt(getStyle(obj,attr));
					
					if (crruent > target) {
						//把負值變為正值
						//把正值變負值
						speed = -speed;
					}
					
					//開啟定時器
					obj.timer = setInterval(function(){
						//擷取box01原來的left值
						//var oldValue = box01.offsetLeft;
						//靈活一些，不止使用left，還有top，width，height等
						//但是擷取的值的是0px，需要使用parseInt()取整：隻取到值的部分
						var oldValue = parseInt(getStyle(obj,attr));
						
						//在舊值的基礎上增加
						  var newValue = oldValue + speed;
						 //小技巧：讓它始終等于800
						  if((speed > 0 && newValue > target) || (speed < 0 && newValue < target )){
						  	newValue = target;
						  }
						//将新值設定給box1
						obj.style[attr] = newValue + "px";
						
						//當到八百的時候停止，但是當10改變的時候，不一定停止了，是以，還得加一個條件
						if(newValue == target){
							
							clearInterval(obj.timer);
							
							//當函數定時器結束的時候，調用回調函數
							//callback();
							//當有回調函數的時候才有，不會導緻不調用的出現undefined
							callback && callback();
							
						}
						
					},30);
				
				
			}

16.JS基礎的學習——16day

1.BOM的基本概念（對浏覽器的操作）

2.History和Location

location

3.方向鍵控制盒子的移動

4.定時器簡介

5.輪播圖的實作

6.延時調用

7.定時器的應用1

8.定時器的應用2向右

9.定時器的練習答案

10.定時器的應用1

11.定時器的應用2

12.測試練習

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條