3-5

日期物件是另一類 JavaScript 的內建物件,我們可用 new Date() 來產生一個日期物件,並用各種方法來取出此物件的相關資訊,如日期、時數、秒數等。例如:

Example(date01.htm):

上述範例的完整原始檔案如下:

原始檔(date01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>日期物件的方法</h2>
<hr>

<script>
today = new Date();
document.write("<br>標準字串:today.toString() = "+today.toString());
document.write("<br>地方字串:today.toLocaleString() = "+today.toLocaleString());
document.write("<br>年份:today.getFullYear() = "+today.getFullYear());
document.write("<br>月份:today.getMonth() = "+today.getMonth());
document.write("<br>日數:today.getDate() = "+today.getDate());
document.write("<br>時數:today.getHours() = "+today.getHours());
document.write("<br>分數:today.getMinutes() = "+today.getMinutes());
document.write("<br>秒數:today.getSeconds() = "+today.getSeconds());
document.write("<br>星期幾:today.getDay() = "+today.getDay());
</script>

<hr>
</body>
</html>

在上例中,new Date() 即會產生包含現在日期的一個日期物件,常用的方法可以列表說明如下:

物件方法說明
DatetoString()以標準字串來表示日期物件
toLocaleString()以地方字串(依作業系統而有所不同)來表示日期物件
getYear()取得西元年份(此方法已經過時,會依瀏覽器而有不同結果,建議不要使用)
getFullYear()取得完整西元年份
getMonth()取得月份(需注意:0 代表一月,因此例如若是八月,結果就是 7)
getDate()取得日數
getHours()取得時數
getMinutes()取得分鐘數
getSeconds()取得秒數
getDay()取得星期數(例如若是星期四,結果就是 4;若是星期日,結果就是 0)

事實上有關日期物件的方法相當多,在下列範例中,我們使用 eval() 來簡化程式,並對這些方法進行較完整的列表:

Example(date02.htm):

上述範例的完整原始檔案如下:

原始檔(date02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>日期物件的方法:使用 eval()</h2>
<hr>

<script>
today = new Date();		// 建立Date物件
// 列出與 Date 物件的一些方法
method =["getDate", "getDay", "getFullYear", "getYear", "getHours", "getMilliseconds",
	"getMinutes", "getMonth", "getSeconds", "getTime", "getTimezoneOffset",
	"getUTCDate", "getUTCDay", "getUTCFullYear", "getUTCHours", "getUTCMilliseconds",
	"getUTCMinutes", "getUTCMonth", "getUTCSeconds", "toGMTString", "toLocaleString",
	"toUTCString", "toString", "valueOf"];

// 列出執行這些方法後得到的結果
for (i=0; i<method.length; i++)
	document.writeln("<br> today." + method[i] + "() = " + eval("today."+method[i]+"();"));
</script>

<hr>
</body>
</html>

Hint
  • UTC 代表「世界時間座標」(Universal Time Coordinate)。
  • GMT 代表「格林威治標準時間」(Greenwich Mean Time)。

在上述方法中,最常用到的就是 getTime(),此方法可以傳回來某個時間物件與 1970 年 1 月 1 日零時的時間差距,單位是 1/1000 秒。例如,我們可以使用這個方法,來寫出一個簡易的馬錶程式,如下:

Example(dateGetTime01.htm):

當你按下「開始計時」後,程式碼內部立即開始計時,直到你按下「停時計時」時,就會在文字欄位顯示經過時間。上述範例的完整原始檔案如下:

原始檔(dateGetTime01.htm):(灰色區域按兩下即可拷貝)
<html>
<body>
<h2 align=center>簡易馬錶</h2>
<hr>

<script language=javascript>
function go(form){
	switch(form.myButton.value){
		case "開始計時":
			date1=new Date();				// 取得目前時間
			form.timeDisplay.value="計時中...";		// 設定時間顯示為 計時中...
			form.myButton.value="停止計時";			// 將按鈕文字改為「停止計時」
			break;
		case "停止計時":
			date2=new Date();				// 取得目前時間
			timeDiff=(date2.getTime()-date1.getTime())/1000;// 時間差距,以秒為單位
			form.timeDisplay.value=timeDiff;		// 設定時間顯示
			form.myButton.value="歸零";			// 將按鈕文字改為「歸零」
			break;
		case "歸零":
			form.timeDisplay.value="00:00:00";		// 設定時間顯示為 00:00:00
			form.myButton.value="開始計時";			// 將按鈕文字改為「開始計時」
			break;
		default:
			alert("Error!");
			break;
	}
}
</script>
<center>
<form>
<input type="button" name="myButton" value="開始計時" onClick="go(this.form)">
<p>經過時間:<input type=text name="timeDisplay" value="00:00:00">秒
</form>
</center>

</body>
</html>

在上述範例中,我們使用按鈕中的文字來代表系統狀態,在不同的狀態下,按下按鈕會有不同的反應,說明如下:

上述流程,可用圖形顯示如下:

Example(dateGetTime01.ppt):

Hint
當然,你也可以設計在計時過程中,文字欄位不斷顯示目前計時結果,但這種密集的即時顯示會比較消耗 CPU 的計算時間。欲達到此功能,必須使用 setTimeOut() 函數,將會在後面詳述。

我們也可以產生一個日期物件後,再對此物件進行修改(例如改變秒數或月份)或格式轉換,相關的方法很多,包含 setDate、setFullYear、setHours、setMilliseconds、setMinutes、setMonth、setSeconds、setTime、setUTCDate、setUTCFullYear、setUTCHours、setUTCMilliseconds、setUTCMinutes、setUTCMonth、setUTCSeconds、setYear 等,在此不再贅述。


JavaScript 程式設計與應用:用於網頁用戶端