日月如梭，玩轉JavaScript日期

標籤：線上

一、Date對象

下面出現的源碼都可以codepen線上查看。

1）時間戳記毫秒計算

Date對象是基於“1970-01-01 08:00:00”到指定日期的毫秒數，不是“00:00:00”。

一天由86,400,000毫秒組成。

var begin = new Date(1970,0,1,0,0,0);//-28800000begin = new Date(1970,0,1,8,0,0);//0

650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120130645734-1747795077.png" width="125" style="border:0px;margin-top:0px;" />

通過上面的代碼列印結果，可以看到是相對於8點的毫秒數。

PHP中的時間戳記是秒，所以在和PHP互動的時候，要除以1000換算成秒。

2）建構函式

Date的建構函式可以傳多種組合的參數：

650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120175836625-984370775.png" width="680" style="border:0px;margin-top:0px;" />

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin-top:10px;border:none;" />

var date1 = new Date("January 20,2017 11:11:05");var date2 = new Date("January 20,2017");var date3 = new Date("2017/01/20 11:11:05");var date4 = new Date("2017/01/20");var date5 = new Date(2017,0,20,11,11,5); //月份從0～11var date6 = new Date(2017,0,20);var date7 = new Date(1484881865000);

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin-top:10px;border:none;" />

650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120180319406-1979537667.png" width="370" style="border:0px;margin-top:0px;" />

 

二、Date對象方法

這裡只列出部分，更多方法可以參考《JavaScript Date 對象》

下面是圖片，不用選中複製了，想複製就點擊上面的地址！

650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120131248171-252309836.png" width="713" style="border:0px;margin-top:0px;" />650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120131330875-125872015.png" width="713" style="border:0px;margin-top:0px;" />

月份的範圍是“0-11”，而不是“1-12”。

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin-top:10px;border:none;" />

var date = new Date(); //擷取一個時間對象var year = date.getFullYear();  // 擷取完整的年份(4位,1970)var month = date.getMonth();  // 擷取月份(0-11,0代表1月,用的時候記得加上1)var day = date.getDate();  // 擷取日(1-31)var hour = date.getHours();  // 擷取小時數(0-23)var minute = date.getMinutes();  // 擷取分鐘數(0-59)var second = date.getSeconds();  // 擷取秒數(0-59)var week = date.getDay();  // 擷取一周中的某一天(0-6) 其中周日是0周六是6

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin-top:10px;border:none;" />

650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201702/211606-20170206183626651-1751213122.png" style="border:0px;margin-top:10px;" />

 

三、日期轉換時間戳記

1. 人類比較喜歡的格式是“2017-01-20 11:11:05:123”；

2. 瀏覽器更喜歡的格式是“2017/01/20 11:11:05:123”。

第一種格式在轉換為時間戳記的時候，會有相容問題，所示，更多相容問題可以參考《JavaScript Date parsing behavior》

650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120114926437-1711997925.png" width="800" style="border:0px;margin-top:0px;" />650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120114952015-1652797067.png" width="800" style="border:0px;margin-top:0px;" />

可以分兩步走，第一步是將格式替換為瀏覽器喜歡的，第二步是使用方法擷取。

1）格式替換

下面的替換用到了簡單的正則，更多正則替換可以參考《飛起來的Regex》

var dateStr = ‘2017-01-20 11:11:05:123‘;date = new Date(dateStr); //傳入一個時間格式，如果不傳入就是擷取現在的時間了，這樣做IOS做Date.parse會返回null//另外一種方式date = new Date(dateStr.replace(/-/g, ‘/‘));

2）擷取時間戳記

用到了4種擷取方式，隱式類型轉換、getTime、valueOf與Date.parse。

前面3種精確到毫秒，而第4種只能精確到秒。

time1 = +date;//隱式類型轉換time2 = date.getTime();time3 = date.valueOf();//與getTime功能一樣，該方法通常在 JavaScript 內部被調用，而不是在代碼中顯式調用。time4 = Date.parse(date);//只能精確到秒

650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120135552625-237431539.png" width="190" style="border:0px;margin-top:0px;" />

其中隱式轉換相當於下面的代碼：

function(){     return Number(new Date); }

上面的代碼用到Number對象做轉換。

還有更多的方法或對象，例如Boolean、String、Number、parseFloat、parseInt、ToInt32等，可以參考《Javascript Type-Conversion》

“+”加號這個符號，可以將不同資料類型轉成不同的值，具體行為可以參考《The unary + operator》

650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120140302828-1722485581.png" style="border:0px;margin-top:10px;" />650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120140309906-475918139.png" style="border:0px;margin-top:10px;" />650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120140316718-1156589349.png" style="border:0px;margin-top:10px;" />

650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120140613078-1720292057.png" style="border:0px;margin-top:10px;" />650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120140619250-1385699888.png" style="border:0px;margin-top:10px;" />650) this.width=650;" src="http://images2015.cnblogs.com/blog/211606/201701/211606-20170120140404031-328507780.png" style="border:0px;margin-top:10px;" />

 

四、常用擴充

1）計算相隔天數

兩個日期相減，再除以各種時間單位的換算。

Math.abs(start - end) / 60 / 60 / 1000 / 24;

2）某個月的第一天

設定年月日，天設定為1，最終產生一個日期對象。

new Date(date.getFullYear(), date.getMonth(), 1);

3）某個月的最後一天

同樣是三個參數，但最後一個天設定為0，月份設定為下一個月。

new Date(date.getFullYear(), date.getMonth()+1, 0)

4）某個月所在季度的第一天

日期的月份先除以3，再通過符號“~~”擷取到整數部分（0、1、2或3），再乘以3擷取到季度的第一個月。

//~~作用是將數字轉化為32位有符號整數 捨去小數不做四捨五入new Date(date.getFullYear(), ~~(date.getMonth()/3)*3, 1);

5）某個月所在季度的最後一天

計算方式與上面相同，不同的月份是再加“3”。

new Date(date.getFullYear(), ~~(date.getMonth()/3)*3 + 3, 0)

6）判斷是否是閏年

月份設定3月，天設定0，就能擷取到2月份的最後一天。

new Date(date.getFullYear(), 2, 0).getDate() == 29

7）某個月份的天數

設定這個日期的下一個月，天數為0。

new Date(date.getFullYear(), date.getMonth()+1, 0).getDate()

還有大家經常會用到的格式化，例如date.format(‘YYYY年MM月DD日‘)，返回“2017年01月20日”。

網上有很多代碼實現方式，這裡就不介紹了。

日月如梭，玩轉JavaScript日期