返回列表 上一主題 發帖

[教學] (教學第3篇)專題實作：圖片式進站時間

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1194 
主題
395 
精華
113 
積分
1747 
點名
0  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2025-4-11 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
1# 跳轉到 » 倒序看帖
打印
tT
發表於 2010-5-9 17:20 | 顯示全部帖子

[教學] (教學第3篇)專題實作：圖片式進站時間


在上一個例題中，我們利用日期物件Date()的擷取方法，擷取時、分、秒等時間資料加以利用，組合出單純的進站瀏覽時間字串，，如果只是顯示文字太沒趣了！我們來稍加變化一下，利用圖片顯示觀賞者進站時間！
首先，我們必須先準備顯示時間的圖片，這樣才能顯示時間哦！
5.png

.substring(begin,end)：字串擷取方法
begin為字串擷取的起始位置，end為字串擷取的終點位置
例如：我們有一個變數 test=’abcdefgh’，當我們使用字串擷取的方法來擷取字串中的某段內容：
  1. X=test.substring(2,5);
複製代碼
請問x應該等於什麼？答案是『cde』！

.length：字串的字元長度屬性
例如：我們有一個變數 test=’abcdefgh’，當我們想知道該字串使用了多少字元(字元長度)，則我們就可以利用字串的字元長度屬性：
  1. X=test.length;
複製代碼
請問x應該等於什麼？答案是『8』！你數數看"abcdefgh"這個字串有幾個字母？

.charAt(Value)方法：以字元計數擷取字串的字元位置，請注意：「A」是大寫喔！Value為擷取字元的參照計數。
例如：我們有一個變數 test=’abcdefgh’，當我們想擷取該字串第三個位置的字元出來，則我們就可以利用下列式子：
  1. X=test.charAt(3);
複製代碼
請問x應該等於什麼？答案是『d』！哇！？答案怎會是「d」而不是「c」啊！這是因為擷取字串的字元我們所給的參照字元計數是從『0』開始，並不是我們習慣的以『1』為開始計數！要注意喔！
  1. <HTML>
  2. <HEAD>
  3. <TITLE>專題實作：圖片式進站時間</TITLE>
  4. </HEAD>
  5. <BODY >

  7. <SCRIPT language="JavaScript">
  8. inTime=new Date()

  10. Hour="0"+inTime.getHours()
  11. Hour=Hour.substring(Hour.length-2,Hour.length)
  12. Hour1=Hour.charAt(1)
  13. Hour0=Hour.charAt(0)

  15. Minute="0"+inTime.getMinutes()
  16. Minute=Minute.substring(Minute.length-2,Minute.length)
  17. Minute1=Minute.charAt(1)
  18. Minute0=Minute.charAt(0)

  20. document.write('<IMG src="'+Hour0+'.gif">')
  21. document.write('<IMG src="'+Hour1+'.gif">')
  22. document.write('<IMG src="x.gif">')
  23. document.write('<IMG src="'+Minute0+'.gif">')
  24. document.write('<IMG src="'+Minute1+'.gif">')
  25. </SCRIPT>

  27. </BODY>
  28. </HTML>
複製代碼
特別注意：
1.在程式碼中的「+」加號在本例中都是『串接符號』，並非算數運算中的加法！
2.在程式碼的第10行與第15行中，我們為何要將擷取出來的「時」與「分」資料再串接上一個「0」？因為當我們將系統時間的時間擷取出來後回應的資料是數字，當數字是2位數時，例如15點20分，擷取獲得的資料是「15」與「20」，在此所得的都是兩位數的數字，在圖片顯示時將會是『15;20』，但若是15點2分，擷取獲得的資料將是「15」與「2」，在圖片顯示時將會是『15;2』，一個是五張圖所組合而成的畫面，另一為四張圖所組合的畫面，這樣不同的結果將會造成我們網頁整體畫面的不協調，所以我們才在擷取出來的「時」與「分」資料再串接上一個「0」，讓所有的時間都是由五張圖所組合而成的畫面！
收藏 分享
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

        靜思自在 : 手心向下是助人，手心向上是求人；助人快樂，求人痛苦。
返回列表 上一主題