JavaScript 計時器事件處理
Download
Report
Transcript JavaScript 計時器事件處理
JavaScript 事件處理
鄧姚文
http://www.ywdeng.idv.tw
JavaScript中的事件
事件
說明
事件
說明
onLoad
瀏覽器載入文件或框架時
onKeyPress
在元件上按下後放開鍵盤時
onUnload
關閉瀏覽器時
onKeyDown 在元件上按下鍵盤時
onClick
滑鼠在元件上按一下時
onKeyUp
在元件上放開鍵盤時
onDbclick
滑鼠在元件上連按兩下時
onSubmit
傳送表單時
onMouseDown
滑鼠在元件上按下按鍵時
onReset
清除表單內容時
onMouseUp
滑鼠在元件上放開按鍵時
onSelect
表單欄位內容被選取時
onMouseOver
滑鼠滑過元件時
onChange
表單欄位內容被變更時
onMouseMove
滑鼠在元件上移動時
onMove
移動瀏覽器視窗時
onMouseOut
滑鼠移開元件時
onResize
變更瀏覽器視窗大小時
onFocus
焦點移動到元件時
onAbort
取消載入網頁或圖片時
onBlur
焦點移開元件時
onError
網頁發生錯誤時
2
練習：點不到的按鈕
在網頁正中央放置一個按鈕，按鈕上顯示『點不
到我！』，按鈕被滑鼠點到時，以 prompt() 顯示
『再試一次？(Yes/No)』預設答案為 Yes，若答案
不為 Yes，以 window.close() 關閉瀏覽器。
完成上述步驟測試之後，在網頁一打開時便將視
窗縮小為 400x300 像素，並設定按鈕之
onMouseOver 事件，以 window.moveTo(x, y) 將視
窗移到別處，避免使用者點擊按鈕。
3
練習：點不到的按鈕（說明）
跳到那裡去？亂跳！
Math.random() 傳回介於0與1之間的數字（包含0
不包含1），可以讓移動的方向更隨機。
X軸：Math.random()傳回值>0.5，向右跳
否則，向左跳
Y軸：Math.random()傳回值>0.5，向下跳
否則，向上跳
超過畫面邊界的處理
以 screen.width、screen.height 判斷螢幕寬高
超過畫面邊界要跳回畫面裡頭來
以 Timeouts 和 Intervals 延遲動作的執行
Timeouts
延遲一段時間執行
只執行一次
Intervals
以固定的週期持續執行
Timeouts
Creating a timeout is done through the
window.setTimeout method
the amount of the delay is in milliseconds
（千分之一秒）
Use window.clearTimeout method to unregister timeout
注意！這裡給的是字串！
Intervals
Intervals are identical to timeouts except
that the function or string expression is
continuously evaluated at the specified
interval until the interval is canceled, instead
of executing only one time when the delay
expires
using a window.setInterval method
設定 Interval
取消 Interval 設定
練習：電子鐘
在網頁上顯示目前日期時間
每半秒鐘更新一次
先以setTimeout實作一次，然後再以
setInterval實作一次
<body onload="showClock()">
d = document.getElementById("clock")
<div id="clock" align="right"></div>
d. innerHTML = …
練習：電子鐘（說明）
日期物件 Date()
getFullYear() 取得『四位西元年』
getMonth() 取得『月』（一月==0）
getDate() 取得『日』（一日==1）
getHours() 取得『小時』
getMinutes() 取得『分』
getSeconds() 取得『秒』
11
練習：動態顯示
列出蔬菜水果清單
當鼠標經過清單中某一蔬果的縮圖時，在
下方顯示蔬果的全圖與名稱
練習：動態顯示（說明）
鼠標經過縮圖時，顯示全圖與蔬果名稱的
基本技巧
<img src="images/apple.jpg" width="30"
onMouseOver="setImage('apple.jpg')" />
總共有 20 項蔬果，一個一個做 <img> 會不
會太累？
以陣列和迴圈製作縮圖表
13
練習：動態顯示（說明）
全域變數
var IMAGE_BASE = "images/";
var imageArray = new Array(
"apple.jpg","asparagus.jpg",
"banana.jpg","broccoli.jpg","cantaloupe.jpg","carrot.jpg",
"corn.jpg","grapefruit.jpg","grapes.jpg",
"kiwi.jpg","onion.jpg","peach.jpg","pear.jpg",
"pepper.jpg","pickle.jpg","pineapple.jpg","raspberry.jpg",
"strawberry.jpg","tomato.jpg","watermelon.jpg");
14
練習：動態顯示（說明）
畫面佈置
<body>
<div id="iconList" align="center"> </div>
<script language="javascript">
init();
</script>
<p align="center">
<img id="fullImage" src="./images/apple.jpg" />
<br />
</p>
<div id="imageName" align="center">apple</div>
<p> </p>
<hr />
</body>
15
練習：動態顯示（說明）
以陣列與迴圈動態產生表格
function init() {
var str = "<h1>蔬菜與水果</h1>\n<table border='1'>";
str += "<tr valign='top' align='center'>";
for (i = 0; i < imageArray.length;) {
str += "<td><img src=\"" + IMAGE_BASE + imageArray[i] +
"\" width='30' onMouseOver='setImage(\"" +
imageArray[i] + "\")' /></td>\n";
每一列 10 格
i++;
if ((i < imageArray.length) && (i % 10 == 0)) {
str += "</tr><tr valign='top' align='center'>";
}
}
換行，再開始下一列
str += "</tr></table>\n";
document.getElementById("iconList").innerHTML = str;
}
16
練習：動態顯示（說明）
function extractFruitName(imageName) {
var name = imageName.split(".");
return name[0];
}
從句點切開，前面是檔名，
後面是副檔名（JPG）
function setImage(imageName) {
document.getElementById("fullImage").src =
IMAGE_BASE + imageName;
document.getElementById("imageName").innerHTML =
extractFruitName(imageName);
}
17
練習：自動輪播
接續蔬菜水果清單的練習
5 秒鐘後自動開始輪播
每隔 2 秒隨機選擇一項蔬果顯示全圖與名稱
18
練習：自動輪播（說明）
增加全域變數
var timer = setTimeout("startAutoPlay()", 5000);
預約 5 秒鐘後開始自動輪播
19
練習：自動輪播（說明）
隨機亂數，介於0~19
function startAutoPlay() {
var n = Math.random() * imageArray.length;
n = n & 0xFFFFFFFF;
showImage(imageArray[n]);
timer = setTimeout("startAutoPlay()", 2000);
}
預約下一次，2 秒鐘後
20
練習：自動輪播（說明）
function showImage(imageName) {
document.getElementById("fullImage").src =
IMAGE_BASE + imageName;
document.getElementById("imageName").innerHTML =
extractFruitName(imageName);
}
使用者動手了，暫停輪播！
function setImage(imageName) {
window.clearTimeout(timer);
showImage(imageName);
timer = setTimeout("startAutoPlay()", 5000);
}
預約 5 秒鐘後開始輪播
21