返回列表下一主題上一主題發帖

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

小誌

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

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

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

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

1^# 跳轉到 » 正序看帖

打印

字體大小: tT

發表於 2010-5-9 17:20 | 只看該作者

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

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

.substring(begin,end)：字串擷取方法
begin為字串擷取的起始位置，end為字串擷取的終點位置
例如：我們有一個變數 test=’abcdefgh’，當我們使用字串擷取的方法來擷取字串中的某段內容：

X=test.substring(2,5);

複製代碼

請問x應該等於什麼？答案是『cde』！

.length：字串的字元長度屬性
例如：我們有一個變數 test=’abcdefgh’，當我們想知道該字串使用了多少字元(字元長度)，則我們就可以利用字串的字元長度屬性：

X=test.length;

複製代碼

請問x應該等於什麼？答案是『8』！你數數看"abcdefgh"這個字串有幾個字母？

.charAt(Value)方法：以字元計數擷取字串的字元位置，請注意：「A」是大寫喔！Value為擷取字元的參照計數。
例如：我們有一個變數 test=’abcdefgh’，當我們想擷取該字串第三個位置的字元出來，則我們就可以利用下列式子：

X=test.charAt(3);

複製代碼

請問x應該等於什麼？答案是『d』！哇！？答案怎會是「d」而不是「c」啊！這是因為擷取字串的字元我們所給的參照字元計數是從『0』開始，並不是我們習慣的以『1』為開始計數！要注意喔！

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

複製代碼

特別注意：
1.在程式碼中的「+」加號在本例中都是『串接符號』，並非算數運算中的加法！
2.在程式碼的第10行與第15行中，我們為何要將擷取出來的「時」與「分」資料再串接上一個「0」？因為當我們將系統時間的時間擷取出來後回應的資料是數字，當數字是2位數時，例如15點20分，擷取獲得的資料是「15」與「20」，在此所得的都是兩位數的數字，在圖片顯示時將會是『15;20』，但若是15點2分，擷取獲得的資料將是「15」與「2」，在圖片顯示時將會是『15;2』，一個是五張圖所組合而成的畫面，另一為四張圖所組合的畫面，這樣不同的結果將會造成我們網頁整體畫面的不協調，所以我們才在擷取出來的「時」與「分」資料再串接上一個「0」，讓所有的時間都是由五張圖所組合而成的畫面！