返回列表 上一主題 發帖

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

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

4.png
2010-5-9 17:13

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


.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 >

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

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

  12. Minute="0"+inTime.getMinutes()
  13. Minute=Minute.substring(Minute.length-2,Minute.length)
  14. Minute1=Minute.charAt(1)
  15. Minute0=Minute.charAt(0)

  16. document.write('<IMG src="'+Hour0+'.gif">')
  17. document.write('<IMG src="'+Hour1+'.gif">')
  18. document.write('<IMG src="x.gif">')
  19. document.write('<IMG src="'+Minute0+'.gif">')
  20. document.write('<IMG src="'+Minute1+'.gif">')
  21. </SCRIPT>

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

本帖最後由 林智奕 於 2014-11-4 01:48 編輯

我知道原因了,還未輸出。
我想問,這段出了什麼問題?
為什麼開啟後會是空白的呢?
  1. <html>
  2. <body>
  3. <script language="javascript">
  4. a="abcdefgh";
  5. b=a.substring(2,5);
  6. </script>
  7. </body>
  8. </html>
複製代碼

TOP

        靜思自在 : 是非當教育,讚美作警惕。
返回列表 上一主題