javascript基礎（定時呼叫及其練習）（四十一）

厚積薄發2017發表於2017-02-16
JavaScript

1.定時呼叫簡介：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 使h1中的內容，每隔1s修改一次
				 */
				//獲取h1
				var count = document.getElementById("count");
				//修改h1中的內容
				//count.innerHTML = 10;
				
				/*
				 * 建立一個for迴圈，多次修改h1中的內容
				 * 迴圈語句執行的速度是非常非常的快的
				 * 
				 */
				/*for(var i=0 ; i<10000 ; i++){
					count.innerHTML = i;
					alert("hello");
				}*/
				
				/*
				 * 定時呼叫
				 * 	- 定時呼叫指每間隔一段時間就呼叫指定的函式一次
				 * 	- 通過setInterval()來開啟一個定時呼叫
				 *  - 引數：
				 * 		回撥函式，該函式將會每間隔一段時間被呼叫一次
				 * 		時間，函式呼叫相隔的時間（毫秒）
				 * 
				 *  - 返回值：
				 * 		會返回一個number型別的值作為返回值，
				 * 			這個number就是定時器的標識
				 */
				
				//定義一個變數來計數
				var num = 1;
				
				var timer = setInterval(function(){
					count.innerHTML = num++;
					
					//判斷num
					if(num == 11){
						//關閉定時器
						clearInterval(timer);
					}
					
				},1000);
				
				//console.log(timer);
				
				
				/*
				 * clearInterval()
				 * 	- 可以用來關閉一個定時器
				 * 	- 需要一個定時器的標識作為引數，需要用它來指定要關閉的定時器
				 */
				//clearInterval(timer);
				
			};
			
		</script>
		
	</head>
	<body>
		
		<h1 id="count"></h1>
		
	</body>
</html>

2.練習一圖片切換：注：圖片自己找 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 圖片自動切換
				 */
				
				//獲取img標籤
				var img = document.getElementsByTagName("img")[0];
				
				//建立一個陣列儲存圖片的路徑
				var imgArr = ["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，導致我們只能關閉最後一個定時器，其他的都不能關閉
					 * 
					 * 注意：我們為一個元素開啟定時器時，一般都需要將該元素上的其他的定時器關閉，避免互相干擾
					 */
					
					//console.log(timer);
					
					//在開啟定時器之前，關閉前邊的定時器
					/*
					 * clearInterval()
					 * 	- 在停止一個定時器時，如果標識有效則會停止定時器
					 * 		如果標識無效則什麼也不做，不會報錯
					 */
					clearInterval(timer);
					
					//開啟定時器用來切換圖片
					timer = setInterval(function(){
						
						//使index自增
						index++;
						
						//判斷index是否超過最大索引
						/*if(index > imgArr.length - 1){
							index = 0;
						}*/
						
						index = index % 5;
						
						//切換圖片
						img.src = imgArr[index];
						
					},500);
				};
				
				
				//為btn02繫結一個單擊響應函式
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					/*
					 * 點選按鈕以後，停止切換圖片，關閉定時器
					 */
					clearInterval(timer);
					
				};
				
				
				
				
			};
			
		</script>
	</head>
	<body>
		
		<button id="btn01">開始</button>
		<button id="btn02">停止</button>
		<br /><br />
		
		<img src="img/1.jpg"/>
		
	</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(){
				
				/*
				 * 使div可以根據不同的按鍵向不同的方向移動
				 * 
				 * 控制元素移動，兩個要素
				 * 	1.移動的方向
				 * 	2.移動的速度
				 * 
				 */
				
				//獲取box1
				var box1 = document.getElementById("box1");
				
				//建立一個變數來表示速度
				var speed = 10;
				
				//定義一個變數，來表示移動的方向
				var dir = 0;
				
				//將控制div移動的程式碼提取出來，放到一個定時器中
				setInterval(function(){
					switch(dir){
						case 37 :
							//使div向左移動 , 減少left屬性值
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39 :
							//使div向右移動 , 增加left屬性值
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38 :
							//使div向上移動 , 減少top屬性值
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40 :
							//使div向上移動 , 增加top屬性值
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
					
				},30);
				
				
				
				//繫結一個按鍵按下的事件
				document.onkeydown = function(event){
					
					event = event || window.event;
					
					
					//如果使用者按了ctrl鍵，則加速
					if(event.ctrlKey){
						speed = 100;
					}else{
						speed = 10;
					}
					
					//當按鍵按下時，修改dir的值
					dir = event.keyCode;
					
					
				};
				
				//繫結一個onkeyup事件
				document.onkeyup = function(){
					
					dir = 0;
					
				};
				
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>



相關文章