JS入門案例2
阿新 • • 發佈:2018-11-04
圖片的切換
<!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>
運用定時器 規定時間彈出圖片
圖片在網頁顯示和隱藏
網頁設定 預設沒有圖片顯示
當點選 顯示按鈕時 出現圖片