2019年6月27日 星期四

(25)影像物件 下篇

結合陣列
若我們需要建立的影像物件非常多，你要是不趕時間，大可一個物件一個物件慢慢地建立，但是，這樣將使程式的執行顯得沒效率，同時，網頁文件的體積無形中也就增大了許多。

還記得之前我們介紹過的變數陣列嗎？陣列是變數的集合，它可以存放多筆型態相同的資料，所以，當你需要建立多個相同型態的物件時，不妨多多利用陣列把它們集合起來，該如何建立物件陣列呢？照例，先把陣列物件建立出來：
  1. ypic = new Array()
接著，先想想你要在陣列內放置多少筆資料，然後利用for迴圈敘述將資料逐筆的放入陣列去，或者是將陣列內的元素建立成其他的物件：
  1. mypic = new Array()
  2. for (x=0;x<10;x++)
  3. {
  4. mypic[x] = new Image()
  5. }
在上列這個程式片斷中：
for迴圈將會重複執行10次（x=0到9），當for迴圈第一次執行時，x=0，mypic[x]就等於mypic[0]，也就說：我們將陣列mypic編號位置為0的元素建立成為一個Image物件；當for迴圈第二次執行時，x=1，mypic[x]就等於mypic[1]，我們將陣列mypic編號位置為1的元素也建立成為一個Image物件，當for迴圈執行完後，我們也就將陣列mypic編號位置0到9的元素都建立成Image物件了，而且這些Image物件全部集合在陣列mypic內。


當然，在for迴圈內我們也可以同時將資料加入於陣列元素內：
  1. for (x=0;x<10;x++)
  2. {
  3. mypic [x] =new Image()
  4. mypic [x].src = "test.gif"
  5. }
在上列這個程式片斷中：
因為我們將陣列中的元素建立成為Image物件，所以，陣列元素也就擁有src（影像檔案）的屬性，當我們將影像檔案存放至陣列元素中，也就不會有任何的錯誤發生了！

實例學習：
使用影像物件與影像物件陣列。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>圖片式小時鐘</TITLE>
  4. </HEAD>
  5. <SCRIPT Language="JavaScript">
  6. //建立陣列變數
  7. clockimage=new Array()
  8. //利用for迴圈將陣列元素建立成為影像物件
  9. for (x=0;x<10;x++)
  10. {
  11. clockimage[x]=new Image()
  12. //將影像檔案存放至陣列元素中
  13. clockimage[x].src=x+".gif"
  14. }
  15. function myclock()
  16. {
  17. //建立日期時間物件
  18. inTime=new Date
  19. //小時
  20. Hour="0"+inTime.getHours()
  21. Hour=Hour.substring(Hour.length-2,Hour.length)
  22. Hour1=Hour.charAt(1)
  23. Hour0=Hour.charAt(0)
  24. //分鐘
  25. Minute="0"+inTime.getMinutes()
  26. Minute=Minute.substring(Minute.length-2,Minute.length)
  27. Minute1=Minute.charAt(1)
  28. Minute0=Minute.charAt(0)
  29. //秒
  30. Second="0"+inTime.getSeconds()
  31. Second=Second.substring(Second.length-2,Second.length)
  32. Second1=Second.charAt(1)
  33. Second0=Second.charAt(0)
  34. //更新網頁中的時間圖片
  35. document.hh1.src=clockimage[Hour0].src
  36. document.hh2.src=clockimage[Hour1].src
  37. document.mm1.src=clockimage[Minute0].src
  38. document.mm2.src=clockimage[Minute1].src
  39. document.ss1.src=clockimage[Second0].src
  40. document.ss2.src=clockimage[Second1].src
  41. //建立動態時間機制
  42. setTimeout("myclock()",1000)
  43. }
  44. </SCRIPT>
  45. <BODY onLoad="setTimeout('myclock()',1000)">
  46. <IMG SRC="0.gif" NAME="hh1">
  47. <IMG SRC="0.gif" NAME="hh2">
  48. <IMG SRC="x.gif">
  49. <IMG SRC="0.gif" NAME="mm1">
  50. <IMG SRC="0.gif" NAME="mm2">
  51. <IMG SRC="x.gif">
  52. <IMG SRC="0.gif" NAME="ss1">
  53. <IMG SRC="0.gif" NAME="ss2">
  54. </BODY>
  55. </HTML>








於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)
  • OpenOffice.org 自由學習趣：Part2Calc4_圖表
    版權宣告 【數位書香網站】之所有著作、視聽內容及資料以及網站畫面資料之安排，其著作權、專利權、商標、營業秘密及其他智慧財產權，均為【昱得資訊工作室】之合法權利人所有，除事先經【昱得資訊工作室】或其權利人之合法授權，任何人皆不得擅...
  • (17)網頁物件 上篇
    網頁物件：document，document物件我們之前已經用過了喔！還記得我們要將資料輸出到網頁上時，使用了write()方法，這個write()方法就是屬於document物件的！ 其實，document物件是指：顯示於瀏覽器視窗中的網頁文件，舉凡與網頁相關的設定項目，都是...
  • DW_PHP_AJAX_CH2 PHP語言入門_(2)變數、符號與陣列_陣列
    [陣列]   什麼叫陣列（Array）？陣列就是一個集合變數, 陣列就如變數一般, 可用來儲存資料, 一般的變數只能存放一筆資料, 而陣列則可以存放多筆資料, 簡言之, 陣列就一群資料型態相同的變數集合。 陣列是一群變數的集合, 不妨將陣列想像成一間旅館, 旅館內會有很多房...
  • DW_PHP_AJAX_CH3 表單的設計與規劃_(4)使用Spry元件驗證欄位_下
    [驗證Email格式] 希望使用者留下聯絡的電子信箱, 卻擔心使用者填寫了錯誤格式的郵件地址, 別擔心, 「Spry驗證文字欄位」也具由電子信箱、身分證字號…等具有特定格式的資料驗證功能。 1. 點選「信箱」文字欄位, 然後按下工具列【Spry】頁籤中的「Spry驗證文...
  • 版權宣告
    【數位書香網站】之所有著作、視聽內容及資料以及網站畫面資料之安排，其著作權、專利權、商標、營業秘密及其他智慧財產權，均為【昱得資訊工作室】之合法權利人所有，除事先經【昱得資訊工作室】或其權利人之合法授權，任何人皆不得擅自以任何形式複製、改作、編輯、散布、傳輸或其他目的加以使用，否...
  • (02)JavaScript算術運算與變數
    算數運算 在我們JavaScript中的算數運算可分為下列5種。 運算元        說明 +        加法，例如document.write(2+3)，網頁輸出答案5 -        減法，例如：document.write(3-2)，網頁輸出答案1 * ...
  • PowerPoint快速鍵
    若要這麼做 請按 從頭開始簡報 F5 從目前的投影片開始簡報 Shift+F5 顯示 簡報者檢視畫面 Alt+F5 或 Alt+S，B 在簡報中，以查看快速鍵的清單，請按下 F1。使用方向鍵在  說明投影片放映  對話方...