Board logo

標題: [教學] (教學第19篇)網頁物件 下篇 [打印本頁]
作者: 小誌    時間: 2010-5-18 18:51     標題: (教學第19篇)網頁物件 下篇

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

未使用

<BODY LINK=”顏色”>

動作中

<BODY ALINK=”顏色”>

已使用

<BODY VLINK=”顏色”>



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

未使用
document.linkColor=”#ＲＧＢ１６進制的顏色碼/顏色英文單字”

動作中
document.alinkColor=”#ＲＧＢ１６進制的顏色碼/顏色英文單字”

已使用
document.vlinkColor=”#ＲＧＢ１６進制的顏色碼/顏色英文單字”




實作學習：
因為與超鏈結相關的三個顏色設定用法相同，所以，就以未使用過的超鏈結顏色「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>
複製代碼
[attach]671[/attach]
作者: 小誌    時間: 2010-5-18 18:53

網頁更新日期
在我們建立檔案的時候，我們的電腦就會幫我們將這個檔案的建立日期記錄起來，稱之為「建檔日期」，這個檔案建立日期可不是固定的！當我們再次編輯這個檔案，而做了「存檔」的動作，則這個檔案的建立日期就改變了，也就成為所謂的：「修改日期」。
[attach]672[/attach]

網頁文件也是一個檔案喔！因此，網頁也有所謂的「建檔日期」，或者，該稱之為「修改日期」，因為，我們會經常進行網頁的更新，建檔的日期已不可考了，能得知的恐怕只有最後一次進行編修時的「修改日期」。
[attach]673[/attach]

為了讓網友知道我們是很用心的在維護網站，並且時時的更新網頁資訊，因此很多網主都會在網頁中告知網在最後的更新日期，如上圖。
那更新日期的訊息我們要自己一頁一頁的加上去嗎？你不會這樣做吧？！粉累耶！我們可以直接利用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>
複製代碼
[attach]674[/attach]



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)