返回列表 上一主題 發帖

[教學] (教學第19篇)網頁物件 下篇

[教學] (教學第19篇)網頁物件 下篇

超鏈結顏色
網頁中超鏈結的顏色設定分為三種:超鏈結的顏色(未被使用過)、連結動作中的超鏈結顏色、已經被使用過的超鏈結顏色,超鏈結這三種情況的顏色設定同屬<BODY>標籤的屬性:

未使用

<BODY LINK=顏色>

動作中

<BODY ALINK=顏色>

已使用

<BODY VLINK=顏色>



使用JavaScript時的document物件相對屬性則為:

未使用
d
ocument.linkColor=#RGB16進制的顏色碼/顏色英文單字

動作中
document.alinkColor=#RGB16進制的顏色碼/顏色英文單字

已使用
document.vlinkColor=#RGB16進制的顏色碼/顏色英文單字




實作學習:
因為與超鏈結相關的三個顏色設定用法相同,所以,就以未使用過的超鏈結顏色「linkColor」屬性設定為例,製作一個自動變換的色彩的超鏈結。
7-6.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>超鏈結顏色</TITLE>
  4. </HEAD>
  5. <SCRIPT LANGUAGE="JavaScript">
  6. //設定超鏈結顏色切換的旗標變數
  7. n=0
  8. //超鏈結顏色切換函式
  9. function changelinkcolor()
  10. {
  11. if (n == 0 )
  12.    {document.linkColor="olive"}
  13. else if (n == 1 )
  14.     {document.linkColor="teal"}
  15. else if (n == 2 )
  16.      {document.linkColor="red"}
  17. else if (n == 3 )
  18.      {document.fgColor="blue"}
  19. else if (n == 4 )
  20.      {document.linkColor="maroon"}
  21. else if (n == 5 )
  22.      {document.linkColor="navy"}
  23. else if (n == 6 )
  24.       {document.fgColor="lime"}
  25. else if (n == 7 )
  26.       {document.linkColor="fuschia"}
  27. else if (n == 8 )
  28.      {document.linkColor="green"}
  29. else if (n == 9 )
  30.       {document.linkColor="purple"}
  31. else if (n == 10 )
  32.        {document.linkColor="gray"}
  33. else if (n == 11 )
  34.       {document.linkColor="yellow"}
  35. else if (n == 12 )
  36.        {document.linkColor="aqua"}
  37. else if (n == 13 )
  38.         {document.linkColor="black"}
  39. else if (n == 14 )
  40.        {document.linkColor="white"}
  41. else if (n == 15 )
  42.        {document.linkColor="silver"}
  43. n++ //等同n=n+1
  44. //如果旗標變數值大於預設顏色的個數,則將變數內容歸零
  45. if (n>15)
  46. {n=0}
  47. //重複呼叫超鏈結顏色切換函式
  48. setTimeout("changelinkcolor()", 500)
  49. }
  50. </SCRIPT>
  51. <!-- 網頁載入時呼叫超鏈結顏色切換函式 -->
  52. <BODY OnLoad="changelinkcolor()">
  53. <a href="test#">不斷變換顏色的超鏈結</a>
  54. </BODY>
  55. </HTML>
複製代碼
7-6.png
2010-5-18 18:51
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

網頁更新日期
在我們建立檔案的時候,我們的電腦就會幫我們將這個檔案的建立日期記錄起來,稱之為「建檔日期」,這個檔案建立日期可不是固定的!當我們再次編輯這個檔案,而做了「存檔」的動作,則這個檔案的建立日期就改變了,也就成為所謂的:「修改日期」。
7-7.png
2010-5-18 18:53


網頁文件也是一個檔案喔!因此,網頁也有所謂的「建檔日期」,或者,該稱之為「修改日期」,因為,我們會經常進行網頁的更新,建檔的日期已不可考了,能得知的恐怕只有最後一次進行編修時的「修改日期」。
7-8.png
2010-5-18 18:53


為了讓網友知道我們是很用心的在維護網站,並且時時的更新網頁資訊,因此很多網主都會在網頁中告知網在最後的更新日期,如上圖。
那更新日期的訊息我們要自己一頁一頁的加上去嗎?你不會這樣做吧?!粉累耶!我們可以直接利用JavaScript來自動幫我們做「更新資訊」啦!我們只要直接取用document物件的「lastModified」屬性就好了。
  1. document.lastModified
複製代碼
實作學習:
在網頁中撰寫一個會自動更新網頁日期的JavaScript程式。
7-7.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>更新日期</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <SCRIPT LANGUAGE="JavaScript">
  7. document.write("本站最後更新日期:"+document.lastModified)
  8. </script>
  9. </BODY>
  10. </HTML>
複製代碼
7-9.png
2010-5-18 18:53
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 犯錯出懺悔心,才能清淨無煩惱。
返回列表 上一主題