返回列表 上一主題 發帖

[教學] (教學第12篇)事件處理器 下篇

[教學] (教學第12篇)事件處理器 下篇

Onload事件
Onlaod事件最常應用於網頁載入時,而事件控制器就加在<BODY>標籤內,其應用如下。
  1. <BODY OnLoad="JavaScript程式敘述或呼叫函式">
複製代碼
其實,Onlaod事件也可以應用於頁框、影像載入時,應用在頁框時就將事件控制器就加在<FramSET>標籤內,而應用在影像時就將事件控制器就加在<IMG>標籤內
  1. //當頁框載入時呼叫init()函式
  2. <frameset onload="init()">
  3. //當影像載入時呼叫imgload()
  4. <img src="home.gif" onload="imgload()">
複製代碼
實做學習
使用OnLoad事件控制器,讓網頁載入時蹦現一個訊息視窗。
1.png
2010-5-12 13:54
  1. <HTML>
  2. <HEAD><TITLE>OnLoad事件</TITLE></HEAD>
  3. <BODY OnLoad="alert('網頁開始載入')">
  4. 訊息視窗出現在網頁載入!!
  5. </BODY>
  6. </HTML>
複製代碼
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

OnUnLoad事件
在當你離開目前瀏覽的網頁時,OnUnLoad 事件就會被引發,這裡所謂的『離開』可能是你點選了網頁中的超鏈結進行其他網頁文件的連結瀏覽動作、選擇前往上一個曾經瀏過的網頁(回到前一頁)、選擇前往下一個曾經瀏過的網頁(前往下一頁)以及關閉瀏覽視窗。
  1. OnUnLoad="JavaScript程式敘述或呼叫函式"
複製代碼
最常見的應用例子就是當瀏覽者離開網頁時,蹦出一個訊息視窗,而在訊息視窗中則顯示一些感謝的話:
1.png
2010-5-12 13:57
  1. <HTML>
  2. <HEAD><TITLE>OnUnLoad事件</TITLE></HEAD>
  3. <BODY OnUnLoad="alert('感謝您的光臨!!\n歡迎有空常來捧場')">
  4. 當你離開本網頁將出現感謝視窗!!
  5. </BODY>
  6. </HTML>
複製代碼
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

setTimeout()定時器
setTimeout()是在JavaScript中的一種計算事件執行時間的方法,主要的目的在指定延遲函數或敘述的執行,其使用格式如下:
  1. SetTimeout(“code”,interval);
複製代碼
  1. SetTimeout(“欲執行的程式碼或函式”,等待時間);
複製代碼

  • code:在指定的等待時間結束後所要執行的程式碼或函式呼叫。
  • interval:指定執行setTimeout()內程式碼或函式呼叫的等待時間。
  • setTimeout()方法的『Interval(等待時間)』設定值的每個單位等於1/1000秒,因此,若我們希望一秒鐘後執行setTimeout()內程式碼或函式呼叫時,則我們必須將setTimeout()方法的『Interval(等待時間)』設定值設為1000,也就是1000 x 1/1000 =1秒。



實做學習
使用OnLoad事件控制器與setTimeout()方法,讓網頁狀態列中產生字串文字跑馬燈。
1.png
2010-5-12 14:00
  1. <HTML>
  2. <HEAD><TITLE>狀態列跑馬燈</TITLE></HEAD>
  3. <SCRIPT Language="JavaScript">
  4. //將出現在狀態列的訊息文字字串
  5. msg="這是一個簡易的狀態列跑馬燈"
  6. //預設開始顯示的字串長度
  7. txt=0;
  8. //跑馬燈函式
  9. function statustxt()
  10. {
  11. //在狀態列加入訊息指定長度的訊息字串
  12. status = msg.substring(0, txt+1);
  13. //將顯示的文字長度加1
  14. txt=txt+1;
  15. //當完整的訊息文字顯示完畢後
  16. //再重新開始逐字加入顯示
  17. if ( txt >= msg.length )
  18. { txt=0; }
  19. //重複執行函式
  20. setTimeout("statustxt()", 200);
  21. }
  22. </SCRIPT>
  23. <!--網頁載入時即呼叫跑馬燈函式-->
  24. <BODY onLoad="statustxt()">
  25. </BODY>
  26. </HTML>
複製代碼

  • 程式碼第12行,.substring(begin,end):擷取起始與結束數值間的文字。
  • 程式碼第17行,msg.length代表取得變數msg的字元長度。


進階研究
使用OnLoad事件控制器與setTimeout()方法,讓網頁狀態列中產生一個即時的小鬧鐘,本例將時間字串的組合(statclock()函式)及顯示時間字串於狀態列(statustxt()函式)的功能分別寫成兩個函式。
1-1.png
2010-5-12 14:03
  1. <HTML>
  2. <HEAD><TITLE>狀態列小時鐘</TITLE></HEAD>
  3. <SCRIPT Language="JavaScript">
  4. //取得現在時間函式
  5. function statclock()
  6. {
  7. now = new Date();
  8. //取得時間"小時"
  9.     hours = now.getHours();
  10. //取得時間"分鐘"
  11.     minutes = now.getMinutes();
  12. //取得時間"秒"
  13.     seconds = now.getSeconds();
  14. //如果取得的小時時間數值大於12點則下午,反之則顯示上午
  15.     timeValue = (hours >= 12) ? "下午 " : "上午 "
  16. //如果取得的小時時間數值大於12點則代表下午
  17. //為了顯示12小時制,所以,若如果取得的小時時間數值大於12點則減12
  18.     timeValue += ((hours > 12) ? hours - 12 : hours) + " 點";
  19. //為了顯示"兩位數"的分鐘時間,所以,若取得的分鐘時間數值小於10
  20. //則在前方加上"0"
  21.     timeValue += ((minutes < 10) ? " 0" : " ") + minutes + " 分";
  22. //為了顯示"兩位數"的秒時間,所以,如果取得的秒時間數值小於10
  23. //則在前方加上"0"
  24.     timeValue += ((seconds < 10) ? " 0" : " ") + seconds + " 秒";
  25. }

  26. //狀態列小時鐘函式
  27. function statustxt()
  28. {
  29. statclock();
  30. //將時間字串資料顯示於狀態列中
  31. status = timeValue;
  32. //重複執行狀態列小時鐘函式
  33. setTimeout("statustxt()", 1000);
  34. }
  35. </SCRIPT>
  36. <!--網頁載入時即呼叫狀態列小時鐘函式-->
  37. <BODY onLoad="statustxt()">
  38. </BODY>
  39. </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()方法重複執行狀態列小時鐘函式,動態地在狀態列中顯示即時的時間。
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

請問各位先進
我測試 onLoad() 都可以成功
但是測試 onUnLoad() 之後,關掉網頁,或是按連結轉到別的網址,他都不會有該有的顯示
我用的是 safari ,但是我查過 safari 有支持這個命令
不知道是否有先進可以提點一二

TOP

        靜思自在 : 謊言像一朵盛開的鮮花,外表美麗,生命短暫。
返回列表 上一主題