1. 程式人生 > >JS入門案例2

JS入門案例2

圖片的切換

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圖片輪轉</title>
	<script>
	/* 1.點選事件onclick
	2.事件和觸發函式changimg
	3.在函式中*/
		function changimg(){
			//alert("即將切換圖片");
			var img=document.getElementById("img1")
			img.src="img/8c710890266d442c81de40b47a401995_th.gif";	
		}
	</script>
</head>

<body>
	<input type="button" value="點選切換圖片" onClick="changimg()"><br>
	<img src="img/590991_074819014553_2.jpg" alt="" id="img1">
</body>
</html>

一開啟網頁顯示這樣子的

當我點選切換圖片時  網頁的圖片發生改變

實現幻燈片的JS技術

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1. 確定事件: 文件載入完成的事件 onload
			2. 事件要觸發 : init()
			3. 函式裡面要做一些事情:(通常會去操作元素,提供互動)
			   1. 開啟定時器: 執行切換圖片的函式 changeImg()
			4.  changeImg()
			   1. 獲得要切換圖片的那個元素
		-->
		<script>
			var index = 0;
			
			function changeImg(){
				
				//1. 獲得要切換圖片的那個元素
				var img = document.getElementById("img1");
				
				//計算出當前要切換到第幾張圖片
				var curIndex = index%3 + 1;  //0,1,2 
				img.src="image/"+curIndex+"1.jpg";  //1,2,3
				//每切換完,索引加1
				index = index + 1;
			}
			
			function init(){
				
				setInterval("changeImg()",1000);
			}
			
		</script>
	</head>
	<body onload="init()">
		<img src="image/1c799c7537e04da69e37f690104233a3_th.jpg" alt="" id="img1"/>
	</body>
</html>

不知道為什麼執行無法切換找不到原因  程式碼是對的........無奈

 

定時器技術

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定時器</title>
<script>
	//window是最頂層的物件
	//window.setInterval("alert('123');",1000);
	function test(){
		console.log("setInterval 呼叫了");
	}
	//setInterval("test()",1000);
	//setTimeout("test()",1000);
	var timeID;
	function startdingshiqi(){
		timeID=setInterval("test()",1000);
	}
	function stopdingshiqi(){
		clearInterval(timeID);
	}
	</script>
</head>

<body>
	<input type="button" value="開始定時器" onClick="startdingshiqi()"><br>
	<input type="button" value="取消定時器" onClick="stopdingshiqi()">
</body>
</html>

點選開始定時的時候 控制檯的 會輸出  setInterval 呼叫了   我等到運行了42次 才停止執行

定時彈出圖片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1. 確定事件: 頁面載入完成的事件 onload
			2. 事件要觸發函式:  init()
			3. init函式裡面做一件事: 
			   1. 啟動一個定時器 : setTimeout() 
			   2. 顯示一個廣告
			      1. 再去開啟一個定時5秒鐘之後,關閉廣告
		-->
		
		<script>
		
			function init(){
				setTimeout("showAD()",3000);
			}
			
			function showAD(){
				//首先要獲取要操作的img
				var img = document.getElementById("img1");
				//顯示廣告
				img.style.display = "block";
				
				//再開啟定時器,關閉廣告
				setTimeout("hideAD()",3000);
			}
			
			function hideAD(){
				//首先要獲取要操作的img
				var img = document.getElementById("img1");
				//隱藏廣告
				img.style.display = "none";
			}
		</script>
	</head>
	<body onload="init()">
		<img id="img1" src="img/t01950208c8da4b8a78.jpg" width="100%" style="display: none;"/>
	</body>
</html>

運用定時器 規定時間彈出圖片

 

圖片在網頁顯示和隱藏

網頁設定 預設沒有圖片顯示

當點選 顯示按鈕時  出現圖片