標題:
[教學]
(教學第12篇)事件處理器 下篇
[打印本頁]
作者:
小誌
時間:
2010-5-12 13:55
標題:
(教學第12篇)事件處理器 下篇
Onload事件
Onlaod事件最常應用於網頁載入時，而事件控制器就加在<BODY>標籤內，其應用如下。
<BODY OnLoad="JavaScript程式敘述或呼叫函式">
複製代碼
其實，Onlaod事件也可以應用於頁框、影像載入時，應用在頁框時就將事件控制器就加在<FramSET>標籤內，而應用在影像時就將事件控制器就加在<IMG>標籤內
//當頁框載入時呼叫init()函式
<frameset onload="init()">
//當影像載入時呼叫imgload()
<img src="home.gif" onload="imgload()">
複製代碼
實做學習
使用OnLoad事件控制器，讓網頁載入時蹦現一個訊息視窗。
[attach]280[/attach]
<HTML>
<HEAD><TITLE>OnLoad事件</TITLE></HEAD>
<BODY OnLoad="alert('網頁開始載入')">
訊息視窗出現在網頁載入!!
</BODY>
</HTML>
複製代碼
作者:
小誌
時間:
2010-5-12 13:58
OnUnLoad事件
在當你離開目前瀏覽的網頁時，OnUnLoad 事件就會被引發，這裡所謂的『離開』可能是你點選了網頁中的超鏈結進行其他網頁文件的連結瀏覽動作、選擇前往上一個曾經瀏過的網頁(回到前一頁)、選擇前往下一個曾經瀏過的網頁（前往下一頁）以及關閉瀏覽視窗。
OnUnLoad="JavaScript程式敘述或呼叫函式"
複製代碼
最常見的應用例子就是當瀏覽者離開網頁時，蹦出一個訊息視窗，而在訊息視窗中則顯示一些感謝的話：
[attach]281[/attach]
<HTML>
<HEAD><TITLE>OnUnLoad事件</TITLE></HEAD>
<BODY OnUnLoad="alert('感謝您的光臨!!\n歡迎有空常來捧場')">
當你離開本網頁將出現感謝視窗!!
</BODY>
</HTML>
複製代碼
作者:
小誌
時間:
2010-5-12 14:01
setTimeout()定時器
setTimeout()是在JavaScript中的一種計算事件執行時間的方法，主要的目的在指定延遲函數或敘述的執行，其使用格式如下：
SetTimeout(“code”,interval);
複製代碼
SetTimeout(“欲執行的程式碼或函式”,等待時間);
複製代碼
code：在指定的等待時間結束後所要執行的程式碼或函式呼叫。
interval：指定執行setTimeout()內程式碼或函式呼叫的等待時間。
setTimeout()方法的『Interval（等待時間）』設定值的每個單位等於1/1000秒，因此，若我們希望一秒鐘後執行setTimeout()內程式碼或函式呼叫時，則我們必須將setTimeout()方法的『Interval（等待時間）』設定值設為1000，也就是1000 x 1/1000 =1秒。
實做學習
使用OnLoad事件控制器與setTimeout()方法，讓網頁狀態列中產生字串文字跑馬燈。
[attach]282[/attach]
<HTML>
<HEAD><TITLE>狀態列跑馬燈</TITLE></HEAD>
<SCRIPT Language="JavaScript">
//將出現在狀態列的訊息文字字串
msg="這是一個簡易的狀態列跑馬燈"
//預設開始顯示的字串長度
txt=0;
//跑馬燈函式
function statustxt()
{
//在狀態列加入訊息指定長度的訊息字串
status = msg.substring(0, txt+1);
//將顯示的文字長度加1
txt=txt+1;
//當完整的訊息文字顯示完畢後
//再重新開始逐字加入顯示
if ( txt >= msg.length )
{ txt=0; }
//重複執行函式
setTimeout("statustxt()", 200);
}
</SCRIPT>
<!--網頁載入時即呼叫跑馬燈函式-->
<BODY onLoad="statustxt()">
</BODY>
</HTML>
複製代碼
程式碼第12行，.substring(begin,end)：擷取起始與結束數值間的文字。
程式碼第17行，msg.length代表取得變數msg的字元長度。
進階研究
使用OnLoad事件控制器與setTimeout()方法，讓網頁狀態列中產生一個即時的小鬧鐘，本例將時間字串的組合（statclock()函式）及顯示時間字串於狀態列（statustxt()函式）的功能分別寫成兩個函式。
[attach]283[/attach]
<HTML>
<HEAD><TITLE>狀態列小時鐘</TITLE></HEAD>
<SCRIPT Language="JavaScript">
//取得現在時間函式
function statclock()
{
now = new Date();
//取得時間"小時"
hours = now.getHours();
//取得時間"分鐘"
minutes = now.getMinutes();
//取得時間"秒"
seconds = now.getSeconds();
//如果取得的小時時間數值大於12點則下午,反之則顯示上午
timeValue = (hours >= 12) ? "下午 " : "上午 "
//如果取得的小時時間數值大於12點則代表下午
//為了顯示12小時制,所以,若如果取得的小時時間數值大於12點則減12
timeValue += ((hours > 12) ? hours - 12 : hours) + " 點";
//為了顯示"兩位數"的分鐘時間,所以,若取得的分鐘時間數值小於10
//則在前方加上"0"
timeValue += ((minutes < 10) ? " 0" : " ") + minutes + " 分";
//為了顯示"兩位數"的秒時間,所以,如果取得的秒時間數值小於10
//則在前方加上"0"
timeValue += ((seconds < 10) ? " 0" : " ") + seconds + " 秒";
}
//狀態列小時鐘函式
function statustxt()
{
statclock();
//將時間字串資料顯示於狀態列中
status = timeValue;
//重複執行狀態列小時鐘函式
setTimeout("statustxt()", 1000);
}
</SCRIPT>
<!--網頁載入時即呼叫狀態列小時鐘函式-->
<BODY onLoad="statustxt()">
</BODY>
</HTML>
複製代碼
程式碼第7行，利用new建構子建立時間日期物件now()。
程式碼第9行，利用時間日期物件的getHours()方法擷取時間「小時」。
程式碼第11行，利用時間日期物件的getMinutes()方法擷取時間「分鐘」。
程式碼第13行，利用時間日期物件的getSeconds()方法擷取時間「秒」。
程式碼第15行，timeValue是一個裝載我們要顯示在狀態列的小時鐘字串變數，我們並未在函式內利用var關鍵字宣告timeValue變數，因此程式中任何的函式都可以取用這個變數內的資料。在此行程式敘述中，我們利用if判斷敘述來決定小時鐘該顯示「上午」或「下午」，如果取得的小時時間數值大於12則下午,反之則顯示為「上午」。
程式碼第18行，如果取得的小時時間數值大於12點則代表下午，為了顯示12小時制,所以,若如果取得的小時時間數值大於12點則減12，並且將「時」間字串資料串接到timeValue變數中。
程式碼第21行，為了顯示"兩位數"的「分」鐘時間，所以，若取得的「分」鐘時間數值小於10則在前方加上"0"，然後將「分鐘」時間字串資料串接到timeValue變數中。
程式碼第24行，為了顯示"兩位數"的「秒」時間，因此，如果取得的「秒」時間數值小於10則在前方加上"0"，然後將「秒」時間字串資料串接到timeValue變數中。
程式碼第32行，將statclock()函式中所完成的時間字串資料（timeValue變數內的資料）顯示於狀態列中。
程式碼第34行，利用setTimeout()方法重複執行狀態列小時鐘函式，動態地在狀態列中顯示即時的時間。
作者:
erick16899
時間:
2022-5-15 13:59
請問各位先進
我測試 onLoad() 都可以成功
但是測試 onUnLoad() 之後，關掉網頁，或是按連結轉到別的網址，他都不會有該有的顯示
我用的是 safari ，但是我查過 safari 有支持這個命令
不知道是否有先進可以提點一二
歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)
