1. 利用系統時間造出 Date object
2. 自訂 Date object 的時間值
1. dateName.getYear( )
2. dateName.getMonth( )
3. dateName.getDay( )
4. dateName.getDate( )
5. dateName.getHours( )
6. dateName.getMinutes( )
7. dateName.getSeconds( )
8. dateName.getTime( )
1. dateName.setDate( )
2. dateName.setYear( )
3. dateName.setMonth( )
4. dateName.setHours( )、dateName.setMinutes( )、dateName.setSeconds( )
5. dateName.setTime( )
1. dateName.getTimezoneOffset( )
2. Date.parse( )
3. dateName.toGMTString( )
4. dateName.toLocaleString( )
Date object (時間物件) 是用來處理網頁中的時間及日期, 例如可以用來顯示或檢查當時的時間, 最常見用途是看網頁開啟的時間, 然後在網頁中顯示 Good Morning、Good Afternoon 或 Good evening 這類歡迎語句, 也可用來提示觀看者距離某一個指定日期 (新年、聖誕節、截止報名日期, 等等) 還有多少日子, 這些資料都不能固定寫在網頁中, 一定要利用 JavaScript 來讀取最新資料。
要使用 Date 的功能, 我們可利用 Date( ) 這一個 method 來讀取電腦系統中的時間值, 再將這時間值用 new operator 造出一個新的 Date object, 使用的是下句的語法, 留意 Date( ) 不能作 date( )。
today= new Date( )
today 是代表了從系統讀取到的時間值, 這就是一個自訂 Date object, today 是自訂名稱, 我們可以任意命名, 但一般程式員都喜用 today 或 now 這兩個字, 筆者在這一章主要用 now 這自訂名稱。
以下例子的 now 代表了網頁開啟時的時間值, 用 document.write( ) 或文字框就可顯示 now 的內容。
<html> <body>
<form name=fm>
<input type=text name=tx
size=40> </form>
<script>
now=new Date( )
document.fm.tx.value=now
</script>
</body> </html>
這網頁有以下顯示:
文字框內的就是網頁開啟時的時間, 資料是取自觀看者的電腦中的系統時間, 這時間是一個物件, 在這例子用 now 來代表, 這時間一經出現後, 就會固定, 到下次這網頁再開啟時, 又會顯示當時開啟的時間。
在上個例子, Date( ) 沒有引數, 就是利用電腦系統中的時間來造出 now 這一個Date object。在一個網頁中, 我們可以造出多個不同的 Date object, 這些 object 可由系統時間來產生, 也可以由我們指定時間, 例如要造出一個 Xmas 的 Date object, 這object 所代表的時間是 Dec 25, 2000, 可使用以下的語法:
Xmas=new Date( "Dec 25, 2000")
假若我們在 Date( ) 內不加上參數, 例如 Xmas=new Date( ), 這 Date( ) method 就會使用系統的時間, 若我們加上參數, 就使用我們供應的時間, 例如以下網頁:
<html> <body>
<script>
now=new Date( )
specialDay=new
Date("dec 25, 2000")
document.write(now +
"<p>" )
document.write(specialDay)
</script>
</body> </html>
若在 2000/3/7 這一日開啟這網頁, 會有以下顯示
Tue Mar 7 20:37:55 UTC+0800 2000
Mon Dec 25 00:00:00 UTC+0800 2000
以上顯示中的 UTC (Universal Coordinated Time/Universal Time Coordinated), 即是 GMT, UTC+0800 是香港的時區, 即是 GMT 時間加 8 小時。
我們要指定一個 Date object 的時間值, 可使用以下的格式:
new Date("month day, year
hours:minutes:seconds")
或 new Date(yr_num, mo_num, day_num, hr_num,
min_num, sec_num)
例如這句: 
這會造出這時間: Sun Jul 30 16:45:40 UTC+0800 2000
我們使用這語法, 一定要包括 年-月-日 的數字, 隨後的 時-分-秒 可以不要。
前一段說到如何產生一個 Date object, 你看到文字框中有多項資料, 若我們只想要某項資料, 可使用以下的 method 將資料抽出來, 然後用一個變數來代表這抽出來的資料。
這會將 Date object 的年份抽出來, 若是 1900 年至 1999 年, 會傳回兩個位的數字, 例如 1999 年會顯示 99, 若要顯示 4 個位數字, 就要將數字與 1900 相加, 因此 99 就會變為 1999。
若是 2000 年或以後, 會傳回 4 個位數字, 例如 2001 年會顯示 2001, 請看以下的 script:
<script>
now=new Date( )
x = now.getYear(
)
document.write(x)
</script>
這也可寫成:
<script>
now=new Date( )
document.write(now.getYear(
) )
</script>
若是在 1999 年開啟這網頁, 會顯示 99 這兩個數字, 若是在 2000 年開啟, 會顯示2000 這四個數字。
假若全部年份要顯示 4 個位的數字, 可使用以下的 script:
<script>
now=new Date( )
x=now.getYear(
)
document.write( eval( x
>= 2000? '0':'1900')
+ x )
</script>
這是使用 conditional operator (? :) 來檢查 x 是否等於或大於 2000, 若是 TRUE, x 與 0 相加, 若是 FALSE, x 與 1900 相加, 所以 99 就會變成 1999。
這會將 Date object 的月份抽出來, 傳回的是 0 至 11 的數值, 代表 12 個月的數字。假若我們要顯示 January、February, 或 "一月"、"二月" 等文字, 就要自行設定, 以下是其中一個方法。
練習-116 getMonth( ) 的使用
1. 請用瀏覽器開啟示範磁碟中的 getmonth.htm, 這檔案有以下內容:
<html> <body
bgcolor=oldlace>
<script>
showMonth=new
Array("Jan", "Feb",
"Mar","Apr",
"May","Jun",
"Jul","Aug","Sep","Oct","Nov","Dec")
now=new Date( )
x=now.getMonth(
)
document.write("Today is " + now.getDate(
) + " " + showMonth[x]
+ " " + now.getYear(
) + "." )
</script>
</body> </html>
2. 網頁開啟後, 請留意出現的時間。
1. 假若開啟這網頁時是 2000 年 3 月 15 日, 會有以下顯示:
Today is 15 Mar 2000.
2. 這 script 首先將月份排成一個名為 showMonth 的陣列, 由 index 0 的J an 至 index 11 的 Dec。
3. 在三月, now.getMonth( ) 會傳回一個 2 字, 用 x 來代表, 隨後用 document.write( ) 來顯示 showMonth[x] , 就會顯示 Mar 這字。
這傳回的是 0 至 6 的數字, 若是星期日傳回 0, 星期一傳回 1, 至星期六就傳回6。若我們要顯示 "星期一"、"星期二" 等文字, 就要自行設定, 以下是其中一個方法。
練習-117 getDay( ) 的使用
1. 請用瀏覽器開啟示範磁碟中的 getday.htm, 這檔案有以下內容:
<html> <body
bgcolor=oldlace>
<script>
showDay=new
Array("星期日", "星期一",
"星期二",
"星期三", "星期四","星期五","星期六")
x=(new
Date( ) ).getDay( )
document.write("今天是" + showDay[x]
+ ", 對嗎? " )
</script>
</body> </html>
2. 網頁開啟後, 留意顯示的星期是否正確。(若不正確, 可能是你電腦系統內的日期錯誤。)
這處的原理與前面說的相同, 留意這處將以下的兩句合併:
now=new
Date( )
x=now.getDay(
) ← x=(new Date(
) ).getDay( ) 或 x=newDate(
).getDay( )
這顯示每月內的日子, 由 1 至 31, 留意這處並不是從 0 開始。例如以下的 script:
<script>
now=new Date( )
document.write( now.getDate(
) )
</script>
若是 20 號, now.getDate( ) 會傳回 20 這數值。
這會將 Date object 的小時抽出來, 傳回的是 0 至 23, 代表了 24 小時, 例如以下兩句:
now=new
Date( )
x=now.getHours( )
若在晚上八時至九時開啟這網頁, x 會等於 20, 若在午夜 12 時至 1 時, x 會等於0。
這處的時間是使用 24 小時格式, 若你要使用 12 小時格式, 就要自行用一個JavaScript 來設定。
這會將 Date object 的分鐘抽出來, 傳回的是 0 至 59 的數值, 代表了一小時內的60 分鐘, 例如以下兩句:
now=new
Date( )
x=now.getMinutes( )
例如開啟網頁時是 8 時 15分, x 會等於 15。
這會將 Date object 的秒抽出來, 傳回的是 0 至 59, 代表了一分鐘內的 60 秒。
使用 getHours( )、getMinutes( )、getSeconds( ) 得出的數值, 若是單位數字, 前面是沒有零的, 例如在 6 時 7 分 5 秒取得數值, 顯示時會有 6, 7, 5 這三個數字, 若我們要顯示 06, 07 及 05 這三個數字, 就要自行設定, 這處的例子是使用 conditional operator, 程式比較簡短。
<html> <body>
<script>
now=new Date( )
hr=now.getHours(
)
min=now.getMinutes(
)
sec=now.getSeconds(
)
document.write("The time now is : " +
( (hr < 10)?
"0" : "" ) + hr
+ ( (min < 10)?
":0" : ":"
) + min + ( (sec
< 10)? ":0" : ":"
) + sec )
</script>
</body> </html>
這是傳回自 1970 年 1 月 1 日 0 時 0 分 0 秒開始, 直至網頁開啟時過了的時間, 單位是微秒 (msec/millisecond/千份之一秒), 請看以下例子。
練習-118 getTime( ) 的使用
在這例子, 觀看者開啟網頁時, 會有文字訊息告訴他離開 2000 年的聖誕節還有多少天。在前面的例子, now 都是用來代表網頁開啟的日期或時間, 在這例子, 筆者不知你何時開啟這網頁, 所以將這日期固定了是 2000 年 10 月 20 日。
1. 請用瀏覽器開啟示範磁碟中的 gettime.htm, 這檔案有以下內容:
<html> <body>
<script>
Xmas=new Date("Dec
25, 2000")
now=new Date("Oct
20, 2000")
interval=(Xmas.getTime(
) - now.getTime( ) ) /1000
/60 /60 /24
document.write("現在距離聖誕節還有
" + interval +
" 天, " +
"是時候購買聖誕禮物了。" )
</script> </body> </html>
2. 網頁開啟後, 你應看到 interval 所代表的數字, 請你改變 now 的時間, 或將 now 改為 now=new Date( ) , 看 interval 的數字能否正確地改變。
在這例子, Xmas.getTime( ) 是計算 1970/1/1 至 2000/12/25 之間有多少個微秒, 這應得出 977 724 000 000 的數值。now.getTime( ) 是計算 1970/1/1 至 2000/10/20 之間的微秒, 這應得出 972 021 600 000 的數值, 兩者相差折算成日數, 就是 66 天。
在 14.1-2 的一節說過如何指定某一個時間值, 若我們要指定時間值內某項資料, 可使用以下說的 method。
這是將一個時間值內的日子變為某一個數值 (1 至 31), 這數值是放在 ( ) 內, 例如 setDate(20) 就是將日子定為 20, 請看以下例子:
<html> <body>
<script>
now=new Date( )
then=new Date( )
then.setDate(25)
document.write(now +
"<p>" )
document.write(then)
</script> </body> </html>
這網頁在 2000/3/9 時開啟會有以下顯示:
Thu Mar 9 19:26:55 UTC+0800 2000 ← 這是 now
Sat Mar 25 19:26:55 UTC+0800 2000 ← 這是 then 及 setDate(25) 的結果
這是指定年份, 若是 1999 年以前, 就使用 2 位年份數字, 例如 setYear(98) 會將年份定為 1998 年, 若是 2000 年以後就使用 4 位年份數字, 例如 setYear(2001) 會將年份定為 2001 年。
這是指定月份, 用 0 至 11 代表 1 月至 12 月, 例如網頁中有這設定:
now=new Date( )
now.setMonth(5)
這網頁在 2000/3/9 的日子開啟會有以下顯示:
Fri Jun 9 19:46:08 UTC+0800 2000
這顯示中的 Jun 是 setMonth(5) 的結果
setHours( ) 是指定時間值內的小時, 由 0 至 23, setMinutes( ) 是指定分鐘, 由 0 至 59, setSeconds( ) 是指定秒數, 由 0 至 59。
這是指定一個時間, 以微秒為單位, 從 1970/1/1 開始計算。例如 setTime(999 000 000 000), 就是從 1970/1/1 開始, 過了 999 000 000 000 微秒的時間, 請看以下的script:
<html> <body>
<script>
then=new Date( )
then.setTime(999000000000)
document.write(then)
</script> </body> </html>
這會顯示: Tue Aug 28 20:00:00 UTC+0800 2001 , 表示從 1970/1/1 開始計算, 過了999 000 000 000 個微秒, 就是 2001/8/28。
這是傳回本地時間與 GMT (Greenwich Mean Time/格林威治時間) 的時差, 單位是分鐘, 例如以下的 script:
<html> <body>
<script>
now=new Date( )
alert(now.getTimezoneOffset(
) / 60 )
</script>
</body> </html>
在對話盒會顯示兩地的時差, /60 是將單位由分鐘轉為小時, 這處會得出 -8 的結果, 表示 GMT 時間減本地時間是 -8 小時。
這用來接受一個文字式的時間, 然後計算由 1970/1/1 至這時間有多少個微秒, 這功能與 getTime( ) 相似, 但這 parse( ) 是固定了屬於 Date 這一個 object, 使用以下語法:
Date.parse("文字式時間" ) 例如: Date.parse("12 mar 2000")
文字式時間是使用這格式: 25 Dec 2000 13:30:00 , 在最後的三個數字代表 時:分:秒 , 可以不要。在 練習-118 的例子, 可作以下寫法:
<html> <body>
<script>
now=new Date("Oct
20, 2000")
interval=(Date.parse("25
dec 2000") - now.getTime(
) ) /1000 /60 /60
/24
document.write("現在距離聖誕節還有
" + interval +
" 天, " +
"是時候購買聖誕禮物了。" )
</script>
</body> </html>
這是將一個時間變為 Internet 上習慣使用的 GMT 格式, 而且轉為 GMT 標準時間, 並將這新時間傳回 (以下用 x 來代表), 例如以下的 script:
<script>
now=new Date( )
x=now.toGMTString(
)
document.write(now +
"<br>")
document.write(x)
</script>
這會在畫面顯示:
Thu Mar 9 15:33:00 UTC+0800 2000 ← 這是原本的 now
Thu, 9 Mar 2000 07:33:00 UTC ← 這是 toGMTSring 的 now
在 第 17 章 說到 cookies, 設定到期日就是使用 GMT 格式, 我們一般都是使用toGMTString( ) 這功能, 這就不用自行輸入。
這是將時間變為我們日常用的格式, 即是 月/日/年 時:分:秒 , 和傳回這新格式的時間 (以下用 x 來代表), 例如以下的 script:
<script>
now=new Date( )
x=now.toLocaleString(
)
document.write(now +
"<br>")
document.write(x)
</script>
這會在畫面顯示:
Thu Mar 7 02:40:12 UTC+0800 2000
03/07/1999 02:40:12