2019年4月30日 星期二

(18)網頁物件 下篇

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

使用JavaScript時的document物件相對屬性則為：
未使用
document.linkColor=”#ＲＧＢ１６進制的顏色碼/顏色英文單字”
動作中
document.alinkColor=”#ＲＧＢ１６進制的顏色碼/顏色英文單字”
已使用
document.vlinkColor=”#ＲＧＢ１６進制的顏色碼/顏色英文單字”

實作學習：
因為與超鏈結相關的三個顏色設定用法相同，所以，就以未使用過的超鏈結顏色「linkColor」屬性設定為例，製作一個自動變換的色彩的超鏈結。
  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>



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

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

為了讓網友知道我們是很用心的在維護網站，並且時時的更新網頁資訊，因此很多網主都會在網頁中告知網在最後的更新日期，那更新日期的訊息我們要自己一頁一頁的加上去嗎？你不會這樣做吧？！粉累耶！我們可以直接利用JavaScript來自動幫我們做「更新資訊」啦！我們只要直接取用document物件的「lastModified」屬性就好了。
  1. document.lastModified
實作學習：
在網頁中撰寫一個會自動更新網頁日期的JavaScript程式。
  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>

於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (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。使用方向鍵在  說明投影片放映  對話方...