第一百零四節，JavaScript時間與日期

JavaScript時間與日期

 

學習要點：

1.Date類型

2.通用的方法

3.格式化方法

4.組件方法

 

ECMAScript提供了Date類型來處理時間和日期。Date類型內置一系列獲取和設置日期時間信息的方法。

 

一．Date類型

ECMAScript中的Date類型是在早期Java中java.util.Date類基礎上構建的。爲此，Date類型使用UTC (Coordinated Universal Time，國際協調時間[又稱世界統一時間]) 1970年1月1日午夜(零時)開始通過的毫秒來保存日期。在使用這種數據存儲格式的條件下，Date類型保存的日期可以精確到1970年1月1日以前或以後的285616年。

Date()建立一個日期對象，使用new運算符和Date構造方法(構造函數)便可

在調用Date構造方法而不傳遞參數的狀況下，新建的對象自動獲取當前的時間和日期。

var box = new Date();                    //建立一個日期對象
alert(box);                    //打印時間對象，返回Thu Nov 03 2016 14:56:21 GMT+0800
                               //不一樣瀏覽器顯示不一樣

ECMAScript提供了兩個方法，Date.parse()和Date.UTC()。Date.parse()方法接收一個表示日期的字符串參數，而後嘗試根據這個字符串返回相應的毫秒數。ECMA-262沒有定義Date.parse()應該支持哪一種日期格式，所以方法的行爲因實現而異，因地區而異。默認一般接收的日期格式以下：

 

Date.parse()方法接收一個表示日期的字符串參數，而後嘗試根據這個字符串返回相應的毫秒數【有參傳時間日期格式】

1.'月/日/年'，如6/13/2011;

2.'英文月名 日, 年'，如 May 25, 2004;

3.'英文星期幾 英文月名 日 年 時:分:秒 時區'，如 Tue May 25 2004 00:00:00 GMT-070

若是Date.parse()沒有傳入或者不是標準的日期格式，那麼就會返回NaN。

var box = Date.parse('6/13/2011');                    //建立一個日期對象,調用parse方法，傳入時間格式
alert(box);                    //打印時間對象，返回1307894400000，時間毫秒數

若是想輸出指定的日期，那麼把Date.parse()傳入Date構造方法裏。

var box1 = new Date(Date.parse('6/13/2011'));  //Date.parse獲取指定時間的毫秒數，將毫秒數傳參給Date()
alert(box1); //返回Mon Jun 13 2011 00:00:00 GMT+0800

var box2 = new Date('6/13/2011');             //直接傳入指定時間，後臺會自動調用Date.parse()方法
alert(box2); //返回Mon Jun 13 2011 00:00:00 GMT+0800

PS：Date對象及其在不一樣瀏覽器中的實現有許多奇怪的行爲。其中有一種傾向是將超出的範圍的值替換成當前的值，以便生成輸出。例如，在解析「January 32, 2007」時，有的瀏覽器會講其解釋爲「February 1, 2007」。而Opera則傾向與插入當前月份的當前日期。

 

Date.UTC()方法接收一個表示日期的字符串參數,返回相應的毫秒數

Date.UTC()方法一樣也返回表示日期的毫秒數，但它與Date.parse()在構建值時使用不一樣的信息。(年份，基於0的月份[0表示1月，1表示2月]，月中的哪一天[1-31]，小時數[0-23]，分鐘，秒以及毫秒)。只有前兩個參數是必須的。若是沒有提供月數，則天數爲1；若是省略其餘參數，則通通爲0.

var box = Date.UTC(2016,11); //必傳參數年月
alert(box);                //返回1480550400000

若是Date.UTC()參數傳遞錯誤，那麼就會出現負值或者NaN等非法信息。

alert(Date.UTC());                        //負值或者NaN

若是要輸出指定日期，那麼直接把Date.UTC()傳入Date構造方法裏便可。

var box = new Date(Date.UTC(2011,11, 5, 15, 13, 16));   //Date.UTC獲取到毫秒數，傳給Date()
alert(box);         //返回Mon Dec 05 2011 23:13:16 GMT+0800

var box = new Date(2011,11, 5, 15, 13, 16);   //直接傳參給Date()【推薦】
alert(box);         //返回Mon Dec 05 2011 15:13:16 GMT+0800

 

二．通用的方法

與其餘類型同樣，Date類型也重寫了toLocaleString()、toString()和valueOf()方法；但這些方法返回值與其餘類型中的方法不一樣。

toLocaleString()方法，格式：2016/11/3 下午4:21:03，瀏覽器有的顯示不一樣

var box = new Date();   //獲取系統當前時間
alert(box.toLocaleString()); //將當前時間格式化，2016/11/3 下午4:21:03，瀏覽器有的顯示不一樣

toString()方法，格式：Thu Nov 03 2016 16:23:22 GMT+0800，返回國際時間格式

var box = new Date();   //獲取系統當前時間
alert(box.toString()); //將當前時間格式化，Thu Nov 03 2016 16:23:22 GMT+0800，給直接Date()同樣，說明默認調用了toString()方法

valueOf()方法，格式：1478162137197，返回毫秒數

var box = new Date();   //獲取系統當前時間
alert(box.valueOf()); //將當前時間格式化，1478162137197，返回毫秒數

PS：這兩個方法在不一樣瀏覽器顯示的效果又不同，但不用擔憂，這兩個方法只是在調試比較有用，在顯示時間和日期上，沒什麼價值。valueOf()方法顯示毫秒數。

 

三．日期格式化方法

Date類型還有一些專門用於將日期格式化爲字符串的方法

toDateString()以特定的格式顯示星期幾、月、日和年/Thu Nov 03 2016

toTimeString()以特定的格式顯示時、分、秒和時區/16:45:47 GMT+0800

toLocaleDateString()以特定地區格式顯示、月、日和年/2016/11/3

toLocaleTimeString()以特定地區格式顯示時、分、秒和時區/下午4:49:03

toUTCString()以特定的格式顯示完整的UTC日期。/Thu, 03 Nov 2016 08:49:53 GMT

var box = new Date();
alert(box.toDateString());                //以特定的格式顯示星期幾、月、日和年/Thu Nov 03 2016
alert(box.toTimeString());                //以特定的格式顯示時、分、秒和時區/16:45:47 GMT+0800
alert(box.toLocaleDateString());            //以特定地區格式顯示、月、日和年/2016/11/3
alert(box.toLocaleTimeString());            //以特定地區格式顯示時、分、秒和時區/下午4:49:03
alert(box.toUTCString());                //以特定的格式顯示完整的UTC日期。/Thu, 03 Nov 2016 08:49:53 GMT

 

四.組件方法

組件方法，是爲咱們單獨獲取你想要的各類時間/日期而提供的方法。須要注意的時候，這些方法中，有帶UTC的，有不帶UTC的。UTC日期指的是在沒有時區誤差的狀況下的日期值。

帶UTC的和不帶UTC的相差8個小時

getTime()獲取日期的毫秒數，和valueOf()返回一致/1478163539545

var box = new Date();
alert(box.getTime());                    //獲取日期的毫秒數，和valueOf()返回一致/1478163539545

setTime()以毫秒數設置日期，會改變整個日期/1478163539545

var box = new Date();
alert(box.setTime(1478163539545));                    //以毫秒數設置日期，會改變整個日期/1478163539545

getFullYear()獲取四位年份/2016

var box = new Date();
alert(box.getFullYear());                    //獲取四位年份/2016

setFullYear()設置四位年份，返回的是毫秒數

var box = new Date();
alert(box.setFullYear(2012));                //設置四位年份，返回的是毫秒數/1351935497504

getMonth()獲取月份，沒指定月份，從0開始算起/11

var box = new Date();
alert(box.getMonth()+1);                    //獲取月份，沒指定月份，從0開始算起/11

setMonth()設置月份/返回毫秒1480758520312

var box = new Date();
alert(box.setMonth(11));                    //設置月份/返回毫秒1480758520312

getDate()獲取日期3

var box = new Date();
alert(box.getDate());                    //獲取日期3

setDate()設置日期，返回毫秒數/1478598717254

var box = new Date();
alert(box.setDate(8));                    //設置日期，返回毫秒數/1478598717254

getDay()返回星期幾，0表示星期日，6表示星期六

var box = new Date();
alert(box.getDay());                    //返回星期幾，0表示星期日，6表示星期六

setDay()設置星期幾返回毫秒數

var box = new Date();
alert(box.setDay());                    //設置星期幾

getHours()返回時18

var box = new Date();
alert(box.getHours());                    //返回時18

setHours()設置時返回毫秒1478145765552

var box = new Date();
alert(box.setHours(12));                    //設置時返回毫秒1478145765552

getMinutes()返回分鐘/4

var box = new Date();
alert(box.getMinutes());                    //返回分鐘/4

setMinutes()設置分鐘返回毫秒/1478168523941

var box = new Date();
alert(box.setMinutes(22));                //設置分鐘返回毫秒/1478168523941

getSeconds()返回秒數

var box = new Date();
alert(box.getSeconds());                    //返回秒數

setSeconds()設置秒數返回毫秒

var box = new Date();
alert(box.setSeconds(44));                //設置秒數返回毫秒

getMilliseconds()返回毫秒數

var box = new Date();
alert(box.getMilliseconds());                //返回毫秒數607

setMilliseconds()設置毫秒數

var box = new Date();
alert(box.setMilliseconds(123));                //設置毫秒數

getTimezoneOffset()返回本地時間和UTC時間相差的分鐘數/-480

var box = new Date();
alert(box.getTimezoneOffset());            //返回本地時間和UTC時間相差的分鐘數/-480

PS：以上方法除了getTimezoneOffset()，其餘都具備UTC功能，例如setDate()及getDate()獲取星期幾，那麼就會有setUTCDate()及getUTCDate()。表示世界協調時間。 

也就是除了getTimezoneOffset()外，其餘方法都有UTC功能，UTC表示世界協調時間，與咱們的時間相差8個小時 ，要使用UTC功能在方法里加上UTC便可  如：

var box = new Date();
alert(box.getUTCHours());                    //獲取UTC時間

用組件方式組合完整的時間【經常使用】

var box = new Date();
alert(box.getFullYear()+'-'+(box.getMonth()+1)+'-'+box.getDate()+' '+box.getHours()+':'+box.getMinutes()+':'+box.getSeconds());
//返回2016-11-3 18:40:22