[JavaScript] Date 日期的格式與方法
JavaScript日期
JavaScript日期的顯示:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
</body>
</html>
將標籤id="demo"的內文指定其值為Date()。
建立Date物件
Date物件可以用來使用日期與顯示。日期由年、月、天、時、分、秒、毫秒組成。
new Date()可以建立一個Date物件，有4種方式:
new Date()
new Date("毫秒")
new Date("日期字串")
new Date("年", "月", "日", "時", "分", "秒", "毫秒")
Date( )
用new Date()來建立一個新的Date物件來顯示目前的日期與時間:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var NowDate = new Date();
document.getElementById("demo").innerHTML = NowDate;
</script>
</body>
</html>
var NowDate = new Date() 建立一個變數名為NowDate的Date物件。
Date("日期字串")
用new Date(指定日期)來建立一個新的Date物件來顯示指定的日期與時間:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var NowDate = new Date("December 30, 2015 12:00:00");
document.getElementById("demo").innerHTML = NowDate;
</script>
</body>
</html>
new Date("December 30, 2015 12:00:00") 指定日期的年月與時間。
new Date("毫秒")
用Date("毫秒")來建立一個新的Date物件，從0毫秒開始計算到指定毫秒的日期。
0毫秒表示1970年1月1日 00時00分00秒，一天為86400000毫秒。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var NowDate = new Date(100000000000);
document.getElementById("demo").innerHTML = NowDate;
</script>
</body>
</html>
new Date(100000000000) 指定顯示從0毫秒到100000000000毫秒的日期。
Date("年", "月", "日", "時", "分", "秒", "毫秒")
用Date("年", "月", "日", "時", "分", "秒", "毫秒")來建立一個新的Date物件來顯示指定的日期與時間:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var NowDate = new Date(2015, 10, 30, 11, 33, 30, 0);
document.getElementById("demo").innerHTML = NowDate;
</script>
</body>
</html>
new Date(2015, 10, 30, 11, 33, 30, 0) 分別指定日期為2015年11月30日11時33分30秒0毫秒。
JavaScript計算月份是由0到11，0代表一月，11代表12月。
日期參數也可以省略後段部分，只指定年跟月:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var NowDate = new Date(2015,10);
document.getElementById("demo").innerHTML = NowDate;
</script>
</body>
</html>
new Date(2015,10) 指定日期為2015年11月。
Date的方法
當建立一個Date物件後，便可以對這個物件使用一些Date的方法。
Date的方法可以取得與設定日期物件的年、月、日、時、分、秒、毫秒。
將Date物件顯示於HTML時，物件會自動用toString()方法轉換為字串:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<p id="demo2"></p>
<script>
var NowDate = new Date();
document.getElementById("demo").innerHTML = NowDate;
document.getElementById("demo2").innerHTML = NowDate.toString();
</script>
</body>
</html>
var NowDate = new Date() 定義變數NowDate為Date物件。
NowDate與NowDate.toString() 皆會返回相同的日期字串。
使用toDateString()方法將物件轉換為更容易閱讀的日期格式:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<p id="demo2"></p>
<script>
var NowDate = new Date();
document.getElementById("demo").innerHTML = NowDate.toDateString();
</script>
</body>
</html>
var NowDate = new Date() 定義變數NowDate為Date物件。
NowDate.toDateString() 轉換Date物件的顯示格式。
Get方法
getFullYear( ) 返回該日期為西元年幾年。
getMonth( ) 返回該日期為幾月(0~11)。
getDate( ) 返回該日期為當月第幾天(1~31日)。
getHours( ) 返回為幾時(0~23)。
getMinutes( ) 返回為幾分(0~59)。
getSeconds( ) 返回為幾秒(0~59)。
getMilliseconds( ) 返回為幾毫秒(0~999)。
getDay( ) 返回該日期為星期幾(0~6)。
使用Get方法取得變數的日期與時間:
<html>
<body>
<p id="demo"></p>
<script>
var NowDate = new Date();
document.getElementById("demo").innerHTML =
NowDate + "<br>"
+ "西元年:" + NowDate.getFullYear() + "<br>"
+ "月份:" + NowDate.getMonth() + "<br>"
+ "日期:" + NowDate.getDate() + "<br>"
+ "時:" + NowDate.getHours() + "<br>"
+ "分:" + NowDate.getMinutes() + "<br>"
+ "秒:" + NowDate.getSeconds() + "<br>"
+ "毫秒:" + NowDate.getMilliseconds() + "<br>"
+ "星期:" + NowDate.getDay() + "<br>"
;
</script>
</body>
</html>
var NowDate = new Date() 定義變數NowDate為目前時間。
NowDate.getFullYear() 返回變數NowDate的西元年。
NowDate.getMonth() 返回變數NowDate的月份。
NowDate.getDate() 返回變數NowDate的日期。
NowDate.getHours() 返回變數NowDate的時。
NowDate.getMinutes() 返回變數NowDate的分。
NowDate.getSeconds() 返回變數NowDate的秒數。
NowDate.getMilliseconds() 返回變數NowDate的毫秒。
NowDate.getDay() 返回變數NowDate為星期幾。
Set方法
setFullYear( ) 設定日期為西元年幾年。
setMonth( ) 設定日期為幾月(0~11)。
setDate( ) 設定日期為當月第幾天(1~31日)。
setHours( ) 設定為幾時(0~23)。
setMinutes( ) 設定為幾分(0~59)。
setSeconds( ) 設定為幾秒(0~59)。
setMilliseconds( ) 設定為幾毫秒(0~999)。
使用Set方法設定變數的日期與時間:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var NowDate = new Date();
NowDate.setFullYear(2020);
NowDate.setMonth(12);
NowDate.setDate(13);
NowDate.setHours(0);
NowDate.setMinutes(20);
NowDate.setSeconds(50);
NowDate.setMilliseconds(400);
document.getElementById("demo").innerHTML =
NowDate + "<br>"
+ "西元年:" + NowDate.getFullYear() + "<br>"
+ "月份:" + NowDate.getMonth() + "<br>"
+ "日期:" + NowDate.getDate() + "<br>"
+ "時:" + NowDate.getHours() + "<br>"
+ "分:" + NowDate.getMinutes() + "<br>"
+ "秒:" + NowDate.getSeconds() + "<br>"
+ "毫秒:" + NowDate.getMilliseconds() + "<br>"
+ "星期:" + NowDate.getDay() + "<br>"
;
</script>
</body>
</html>
var NowDate = new Date() 定義變數NowDate為目前時間。
NowDate.setFullYear(2020) 設定變數NowDate的西元年為2020。
NowDate.setMonth(12) 設定變數NowDate的月份為12(0)。
NowDate.setDate(13) 設定變數NowDate的日期為13。
NowDate.setHours(0) 設定變數NowDate的時為0(凌晨整點)。
NowDate.setMinutes(20) 設定變數NowDate的分為20。
NowDate.setSeconds(50) 設定變數NowDate的秒數為50。
NowDate.setMilliseconds(400) 設定變數NowDate的毫秒為400。
用Set與Get方法來增加日期與時間:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var NowDate = new Date();
NowDate.setFullYear(NowDate.getFullYear()+1);
NowDate.setMonth(NowDate.getMonth() + 1);
NowDate.setDate(NowDate.getDate() + 1);
NowDate.setHours(NowDate.getHours() + 1);
NowDate.setMinutes(NowDate.getMinutes() + 1);
NowDate.setSeconds(NowDate.getSeconds() + 1);
NowDate.setMilliseconds(NowDate.getMilliseconds() + 1);
document.getElementById("demo").innerHTML =
NowDate + "<br>"
+ "西元年:" + NowDate.getFullYear() + "<br>"
+ "月份:" + NowDate.getMonth() + "<br>"
+ "日期:" + NowDate.getDate() + "<br>"
+ "時:" + NowDate.getHours() + "<br>"
+ "分:" + NowDate.getMinutes() + "<br>"
+ "秒:" + NowDate.getSeconds() + "<br>"
+ "毫秒:" + NowDate.getMilliseconds() + "<br>"
+ "星期:" + NowDate.getDay() + "<br>"
;
</script>
</body>
</html>
var NowDate = new Date() 定義變數NowDate為目前時間。
NowDate.getxxx()的方法都是在取得現在目前的日期，而外層的NowDate.setxxx()方法則是將取得的日期設定為+1。
日期的轉換
Date.parse( )
能夠將一段日期的字串轉換為毫秒(從西元1970年1月1日開始到現在的毫秒數):
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var Date = Date.parse("Novamber 7,2016");
document.getElementById("demo").innerHTML = Date;
;
</script>
</body>
</html>
Date.parse("Novamber 7,2016") 將字串"Novamber 7,2016"轉換為毫秒。
也可以將毫秒轉換為日期物件:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var Date_Milliseconds = Date.parse("Novamber 7,2016");
var Date_Object = new Date(Date_Milliseconds);
document.getElementById("demo").innerHTML = Date_Object;
</script>
</body>
</html>
Date.parse("Novamber 7,2016") 將字串"Novamber 7,2016"轉換為毫秒。
new Date(Date_Milliseconds) 新定義一個Date物件，日期指定為"Novamber 7,2016"的毫秒
日期的比較
可以將兩個日期做日期大小比較，如下:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var today, years_later, text;
today = new Date();
years_later = new Date();
years_later.setFullYear("2020,1,1");
if (today > years_later)
{
text = "今天是2020年1月1日之後";
}
else
{
text = "今天是2020年1月1日之前";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
var today, years_later, text 定義三個變數。
today = new Date() 定義變數today 為日期物件，不指定日期以表示現在的日期與時間。
years_later.setFullYear(2020, 0, 14) 設定變數years_later為2020年1月1日。
if (today > years_later) 判斷變數today 是否大於變數years_later。
日期格式
語法(YYYY-MM-DD)的日期格式:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var sDate = new Date("2016-12-13");
document.getElementById("demo").innerHTML = sDate;
</script>
</body>
</html>
new Date("2016-12-13") 輸入日期為2016年12月13日。
也可以只輸入年月new Date("2016-12")或只輸入年分new Date("2016")。
語法(YYYY-MM-DD HH:MM:SS)顯示時、分、秒:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var sDate = new Date("2016-12-13 11:13:00");
document.getElementById("demo").innerHTML = sDate;
</script>
</body>
</html>
new Date("2016-12-13 11:13:00") 輸入日期為2016年12月13日11點13分0秒。
語法(YYYY/MM/DD)的日期格式:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var sDate = new Date("2016/12/13");
document.getElementById("demo").innerHTML = sDate;
</script>
</body>
</html>
new Date("2016/12/13") 輸入日期為2016年12月13日。
也可以輸入new Date("12/13/2016")將年份擺在後面。
語法("MMM DD YYYY")的日期格式:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var sDate = new Date("2016 January 1");
document.getElementById("demo").innerHTML = sDate;
</script>
</body>
</html>
