(教學第3篇)專題實作：圖片式進站時間
[attach]154[/attach]在上一個例題中，我們利用日期物件Date()的擷取方法，擷取時、分、秒等時間資料加以利用，組合出單純的進站瀏覽時間字串，，如果只是顯示文字太沒趣了！我們來稍加變化一下，利用圖片顯示觀賞者進站時間！
首先，我們必須先準備顯示時間的圖片，這樣才能顯示時間哦！
[attach]155[/attach]
[color=DarkOrange][b][size=4] .substring(begin,end)：字串擷取方法[/size][/b][/color]
begin為字串擷取的起始位置，end為字串擷取的終點位置
例如：我們有一個變數 test=’abcdefgh’，當我們使用字串擷取的方法來擷取字串中的某段內容：[code]X=test.substring(2,5);[/code]請問x應該等於什麼？答案是『cde』！
[color=DarkOrange][b][size=4] .length：字串的字元長度屬性[/size][/b][/color]
例如：我們有一個變數 test=’abcdefgh’，當我們想知道該字串使用了多少字元(字元長度)，則我們就可以利用字串的字元長度屬性：[code]X=test.length;[/code]請問x應該等於什麼？答案是『8』！你數數看"abcdefgh"這個字串有幾個字母？
[color=DarkOrange][size=4][b].charAt(Value)方法：以字元計數擷取字串的字元位置，請注意：「A」是大寫喔！Value為擷取字元的參照計數。[/b][/size][/color]
例如：我們有一個變數 test=’abcdefgh’，當我們想擷取該字串第三個位置的字元出來，則我們就可以利用下列式子：[code]X=test.charAt(3);[/code]請問x應該等於什麼？答案是『d』！哇！？答案怎會是「d」而不是「c」啊！這是因為擷取字串的字元我們所給的參照字元計數是從『0』開始，並不是我們習慣的以『1』為開始計數！要注意喔！[code]<HTML>
<HEAD>
<TITLE>專題實作：圖片式進站時間</TITLE>
</HEAD>
<BODY >
<SCRIPT language="JavaScript">
inTime=new Date()
Hour="0"+inTime.getHours()
Hour=Hour.substring(Hour.length-2,Hour.length)
Hour1=Hour.charAt(1)
Hour0=Hour.charAt(0)
Minute="0"+inTime.getMinutes()
Minute=Minute.substring(Minute.length-2,Minute.length)
Minute1=Minute.charAt(1)
Minute0=Minute.charAt(0)
document.write('<IMG src="'+Hour0+'.gif">')
document.write('<IMG src="'+Hour1+'.gif">')
document.write('<IMG src="x.gif">')
document.write('<IMG src="'+Minute0+'.gif">')
document.write('<IMG src="'+Minute1+'.gif">')
</SCRIPT>
</BODY>
</HTML>[/code][color=Red]特別注意：[/color]
1.在程式碼中的「+」加號在本例中都是『串接符號』，並非算數運算中的加法！
2.在程式碼的第10行與第15行中，我們為何要將擷取出來的「時」與「分」資料再串接上一個「0」？因為當我們將系統時間的時間擷取出來後回應的資料是數字，當數字是2位數時，例如15點20分，擷取獲得的資料是「15」與「20」，在此所得的都是兩位數的數字，在圖片顯示時將會是『15;20』，但若是15點2分，擷取獲得的資料將是「15」與「2」，在圖片顯示時將會是『15;2』，一個是五張圖所組合而成的畫面，另一為四張圖所組合的畫面，這樣不同的結果將會造成我們網頁整體畫面的不協調，所以我們才在擷取出來的「時」與「分」資料再串接上一個「0」，讓所有的時間都是由五張圖所組合而成的畫面！ [i=s] 本帖最後由 林智奕 於 2014-11-4 01:48 編輯 [/i]
我知道原因了，還未輸出。
[quote]我想問，這段出了什麼問題?
為什麼開啟後會是空白的呢?[code]<html>
<body>
<script language="javascript">
a="abcdefgh";
b=a.substring(2,5);
</script>
</body>
</html>[/code][/quote]
頁:
[1]