整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript還可以處理日期?你只需要這樣做

          JavaScript還可以處理日期?你只需要這樣做

          日期相關的問題與JavaScript一樣古老。從理論上講,如果不是因為API的許多弱點,可以使用JavaScript的date對象執行日期計算。幸運的是,有一些有用的庫可以為我們節省很多工作。其中之一是date-fns。


          一個問題,例如,是與日期對象不同的時區的處理,由于JavaScript使用當前系統時區為基礎。這可能會導致困難,尤其是涉及跨多個時區的應用程序時。月份的表示形式是JavaScript中date對象的另一特性。例如,一月的值指定為0。但是,當涉及到日期和年份時,JavaScript會再次遵循預期的標準,因此,5 號用數字5表示。

          當您實現一個使用日期值的應用程序時,您經常會發現必須創建,修改和輸出它們的問題。使用機載JavaScript工具,可以輕松進行創建和輸出。但是,如果日期被修改,例如,如果你想從一個日期減去兩天了,這是不再可能。當然,您可以獲取日期的時間戳,然后減去相應的毫秒數以達到目標日期。該解決方案不容易閱讀和維護,或者特別優雅。由于這個問題,還有更多的問題,過去已經創建了許多庫,以使您更輕松地處理JavaScript中的日期值。市場上最廣泛的解決方案之一是Moment.js。不過,前一陣子已經成為了一個嚴重的競爭對手:

          date-fns與Moment.js有何不同?

          最重要的區別之一是項目名稱,因為fns代表功能。日期FNS的功能,它允許您使用日期值的集合。
          與此相反,Moment.js具有面向對象的方法。在這里,您創建一個瞬間 -instance和工作與此對象的方法。當然,這會影響包裝尺寸。
          Moment.js默認包含整個界面。您確實可以優化程序包,但這需要其他步驟。在date-fns中,您僅加載真正需要的功能。
          不過,在帶有Node.js的后端應用程序中,這無關緊要,因為軟件包大小是一個小問題。您可以使用日期FNS就像Moment.js,在前端的瀏覽器。包裝的大小在這里起決定性作用。

          date-fns的開發人員不僅確保將項目劃分為許多小的且很大程度上獨立的功能,而且還確保這些功能是純功能。例如,您傳遞一個日期對象和要添加到addHours函數的小時數。結果,您將獲得一個新的日期對象,其中指定的小時數晚于您輸入的日期。因此,沒有副作用,例如直接修改輸入。

          如何安裝日期FNS?

          與大多數其他JavaScript庫一樣,date-fns可作為npm軟件包提供,并可通過npm進行安裝。在項目中使用命令npm install date-fns進行操作。該軟件包將作為依賴項自動添加到您的package.json文件中。同樣,您可以將紗線與紗線 添加日期-fns命令一起使用。

          如何使用它?

          您可以使用日期FNS包與CommonJS的模塊系統都和也與ES模塊。在下面的示例中,您使用格式函數輸出當前日期。清單1顯示了如何使用CommonJS模塊系統。

          清單1:通過CommonJS模塊化系統集成date-fns

          1個

          2

          3

          4

          5

          const { format }=require('date-fns');

          const date=new Date();

          console.log(`Heute ist der: ${format(date, 'DD.MM.YYYY')}`);

          Node.js的較新版本還支持關鍵字的進口和出口,以進口和出口分別模塊。此時,您可以導入整個date-fns軟件包并訪問所需的功能,也可以利用每個功能在單獨的文件中可用的事實,因此可以單獨導入格式功能。你可以看到這是如何工作清單2所示。

          清單2:將date-fns與ES模塊一起使用

          1個

          2

          3

          import { format } from 'date-fns/format';

          const date=new Date();

          console.log(`Heute ist der: ${format(date, 'DD.MM.YYYY')}`);

          格式化日期值

          使用格式,您已經學習了格式化日期值的最重要功能。
          您可以使用格式字符串來指定要格式化日期的哪一部分以及如何格式化。
          您可以在https://date-fns.org/docs/format中找到可以在格式字符串中使用的各個令牌的全面參考。

          除此功能外,您還可以訪問其他輔助功能,例如distanceInWords函數,該函數以可讀形式輸出兩個日期值之間的差。

          日期算術

          已經提到的JavaScript中對象日期的漏洞是缺少對日期算術的支持。因此,事不宜遲地執行加法或減法。
          date-fns為此提供了許多輔助功能。這些功能通常有一個統一的命名方案:首先,你指定的操作,其次是要與工作單位。
          這將導致函數名稱,例如addMinutes或subYears。此類別的所有函數都將日期對象作為第一個參數,將數字作為第二個參數表示要添加或減去的單位數。例如,在一個小時的四分之三添加到當前為止,你可以從清單3使用的代碼。

          清單3:使用date-fns的日期算術

          1個

          2

          3

          4

          5

          const { addMinutes, addHours, format }=require('date-fns');

          const date=addMinutes(addHours(new Date(), 1), 45);

          console.log(format(date, 'DD.MM.YYYY HH:mm'));

          比較

          日期FNS的比較功能也非常有幫助,在他們的幫助,你可以決定是否一個謊言日期之前或之后另一個,還是在某個日期在于未來或過去。清單4使用isAfter和isFuture函數作為示例來說明它們的用法。

          清單4:wit dat-fns的比較

          1個

          2

          3

          4

          5

          6

          const { isAfter, isFuture, addHours }=require('date-fns');

          const date1=new Date();

          const date2=addHours(new Date(), 5);

          console.log(`Date1 is ${isAfter(date1, date2) ? 'after' : 'before'} Date2`);

          console.log(`Date2 is ${isFuture(date2) ? 'not' : ''} in the past`);

          進一步的操作

          該日期FNS包為您提供不僅是簡單的操作,如加,但也更復雜的操作,如areRangesOverlapping功能,你可以用它來確定兩個時間跨度是否重疊。

          隨著最小和最大的功能,你可以找到一系列的日期值的最早或最晚日期。

          借助compareAsc和compareDsc函數,您還可以對具有日期值的數組進行排序。該函數作為比較函數傳遞給數組的sort方法。清單5是這樣的一個例子。

          清單5:對日期值進行排序

          1個

          2

          3

          4

          5

          6

          7

          8

          9

          10

          11

          12

          13

          14

          15

          16

          17

          const { compareAsc }=require('date-fns');


          const sortedDates=[

          new Date(2001, 1, 1),

          new Date(2003, 3, 3),

          new Date(2002, 2, 2),

          ].sort(compareAsc);


          console.log(sortedDates);

          結論

          Moment.js或date-fns之類的許多程序包都提供了,您也可以使用本機JavaScript來實現。但是,在這些情況下,源代碼的可讀性受到很大影響。除了更正JavaScript 日期對象的特性之外,這是支持使用這些庫的最重要的論據之一。

          這里顯示的日期FNS的可能性僅代表庫中的一小部分,并只給你這個庫的功能范圍的味道。有了眾多擴展,并為應用程序的國際化提供了很好的支持,您下次確定一個應用程序的日期庫時,至少應將date-fns入圍。

          最后,開發這么多年我也總結了一套學習Java的資料與面試題,如果你在技術上面想提升自己的話,可以關注我,私信發送領取資料或者在評論區留下自己的聯系方式,有時間記得幫我點下轉發讓跟多的人看到哦。

          內容是《Web前端開發之Javascript視頻》的課件,請配合大師哥《Javascript》視頻課程學習。

          Date日期對象:用于處理日期和時間。

          基本概念:

          GMT:(Greenwich Mean Time)格林尼治標準時(格林威治),這個時間系統的概念在 1884 年確立,由英國倫敦的格林威治皇家天文臺(即本初子午線的位置)計算并維護。

          UTC:(Universal Time Code 通用時間),也叫格林尼治標準時間,(也稱為:協調世界時、世界統一時間、世界標準時間、國際協調時間)。

          時區:由于各國家與地區經度不同,地方時也有所不同; 1884年在華盛頓召開的一次國際經度會議,把全球劃分為不同的時區,每隔經度15°劃分一個時區,其被劃分為24個時區,分為東12區和西12區。

          夏令時:(Summer time),又稱日光節約時、日光節約時間,是一種為節約能源而人為規定地方時間的制度,在這一制度實行期間所采用的統一時間稱為“夏令時間”。

          計算機元年(紀年):1970年1月1日0時0分0秒作為計算機元年,用于計時的開始。

          時間戳:是一個自增的整數,它表示從1970年1月1日零時整的GMT時區開始的那一刻,到現在的毫秒數,時間戳可以精確地表示一個時刻,并且與時區無關。

          Date使用的是UTC;是所有時區的基準標準時間,是1970年1月1日凌晨0點0分0秒開始經過的毫秒數保存日期;

          在使用這種數據存儲格式的條件下,Date()類型保存的日期能夠精確到70年1月1日之前或之后的100 000 000天。

          Date對象創建

          使用Date()構造函數,語法:var now=Date();

          var d = new Date();  //以當前日期和時間創建Date對象
          var d = new Date(0);  //以距離1970.1.1:00:00:00的毫秒數創建Date對象
          var d = new Date(2020,7,18);
          console.log(d);

          new Date()的參數很多種形式,每種都表示不同的含義;

          如果傳值為 0,會得到一個表示 1970年1月1日的Date 對象;

          或者使用Date()函數,但本質上不一樣,輸出也不一樣,實質上是一個轉換函數;

          說明:因為要傳入是表示該日期的毫秒數(即從UTC時間70年1月1日前夜起到該日期止的毫秒數)。為了簡化這一計算過程,ECMAScript提供了兩個靜態方法:Date.parse()和Date.UTC();

          Date.parse()方法接受一個表示日期的字符串參數,返回一個時間戳(毫秒數);

          日期字符串應該符合 RFC 2822 和 ISO 8061 這兩個標準,ISO 8601擴展格式 YYYY-MM-DDTHH:mm:ss:ssssZ,如:2020-05-25T00:00:00;(yyyy4位年份、MM月份、DD天、HH時、mm分、ss秒、ssss毫秒)

          通常見的日期格式:

          mm/dd/yyyy 如: 3/21/2009,即月/日/年

          yyyy/mm/dd 如: 2009/3/21

          mmmm dd,yyyy 如: Apr 21,2009,即英文月名 日,年,即January 12,2010

          英文星期幾 月 日 年 時:分:秒 時區,如:Tue May 25 2020 00:00:00 GMT-0700

          var d = Date.parse("May 25,2020");
          Date.parse('2018-07-22')
          Date.parse('2018-07')
          Date.parse('2018')
          Date.parse('07/22/2018')
          Date.parse('2018/07/22')
          Date.parse('2018/7/22')
          Date.parse('July 22, 2018')
          Date.parse('July 22, 2018 07:22:13')
          Date.parse('2018-07-22 07:22:13')
          Date.parse('2018-07-22T07:22:13')

          注:如果傳入Date.parse()方法的字符串不能表示日期,那么它會返回NaN;

          根據parse()返回值創建Date對象;

          var d = new Date(Date.parse("May 25, 2020"));

          實際上,如果直接將表示日期的字符串傳遞給Date構造函數,也會在后臺調用Date.parse(),兩者是等價的,如:

          var d = new Date("May 25, 2020");

          注:日期對象在不同瀏覽器實現的并不統一,比如,傳入了超出范圍的值:

          var d = new Date("January 33,2020");

          在解析January 33,2020,有些瀏覽器返回:Invalid Date;IE返回:Sun Feb 02 2020(把超出的時間往后自動推算);

          可以在月份或者日期字段添加或省略前導零;

          console.log(new Date('2020-6-6'));
          console.log(new Date('2020-06-06'));
          console.log(new Date('2020-06-06 09:18:15'));
          console.log(new Date('2020-06-06T09:18:15'));
          console.log(new Date('2020-06'));
          console.log(new Date('2020'));
          console.log(new Date('06/07/2020'));
          console.log(new Date('2020/06/07'));
          console.log(new Date('2020/6/7'));
          console.log(new Date('2020.6.7'));
          console.log(new Date('2020.6.7 15:18:15'));
          console.log(new Date('July 18, 2020'));
          console.log(new Date('July 18, 2020 09:30:28'));
          console.log(new Date('18 July 2020'));
          console.log(new Date('18 July, 2020'));
          console.log(new Date('18 July 2020 09:30:28'));
          console.log(new Date('July 2020'));

          其實Date在內部是使用時間戳實現的;

          var d = new Date(1591866649132)
          console.log(d);

          UNIX 時間戳的原因以秒(seconds)為單位。JavaScript 以毫秒(milliseconds)為單位記錄時間。

          可在使用UNIX 時間戳去實例化Date 對象;

          var timestamp = 1591866649;
          var d = new Date(timestamp * 1000);
          console.log(d);

          Date.UTC()方法:

          返回表示日期的毫秒數,但它與Date.parse()在構建值時使用不同的信息,即與當前所在的時區相關,生成的日期都相對于計算機的時區;

          語法:Date.UTC(year, month[, date[, hrs[, min[, sec[, ms]]]]]);

          其參數為日期中的年,月(基于0),日,小時(0到23),分,秒,毫秒,其中年月必選;如果沒有提供日,默認為1,如果省略其他參數,則統統默認為0;

          至少應該是3個參數,但是大多數 JavaScript 引擎都能解析 2 個或 1 個參數;

          var d = Date.UTC(2020);
          var d = Date.UTC(2020,6);  // 毫秒數1593561600000
          var d=new Date(Date.UTC(2020,6)); 
          var d = new Date(Date.UTC(2020,6,6,17,55,55)); // 自動添加時區,返回當地日期和時間
          var d=new Date(2020,6,10); //月份從0開始,6即是7月
          console.log(d);

          如果沒有任何關于時區的信息,會將日期視為 UTC ,并自動執行到當前計算機時區的轉換;

          可以直接把UTC參數傳遞給Date()構造函數,如:

          var d=new Date(2020,6); // Wed Jul 01 2020 00:00:00 GMT+0800 
          var d = new Date(2020,6,6,17,55,55); // 即為GMT時間
          console.log(d);

          時區:

          當初始化一個 Date 對象時可以選擇時區,可以通過添加 +HOURS 的格式,或者通過一個被圓括號包裹的時區名來描述一個時區:

          console.log(new Date());
          console.log(new Date('Jun 7,2020 13:51:01 +0700'));
          console.log(new Date('Jun 7,2020 13:51:01 (CET)'));   // CET歐洲中部時間

          如果你使用時區名的方式但在圓括號中定義了一個錯誤的時區名,JavaScript 將會靜默地將時區設置為默認的 UTC。

          如果你使用 +HOURS 的方式但傳入的數字格式是錯誤的,JavaScript 將會拋出一個 “Invalid Date” 的 Error。

          繼承的方法:

          與其他引用類型一樣,Date類型也重寫了toLocaleString()、toString()和valueOf()方法;但這些方法的返回值與其他類型中的方法不同。

          valueOf()方法:返回日期的毫秒數;

          toString()方法:通常返回帶有時區信息的日期和時間;其中時間一般以軍用時間(即小時從0到23);

          toLocaleString():會按照與瀏覽器設置的地區相適應的格式返回日期和時間;即時間格式中會包含AM或PM,但不會包含時區信息;

          var d=new Date(2020,6); // Wed Jul 01 2020 00:00:00 GMT+0800 
          var d = new Date(2020,6,6,17,55,55); // 即為GMT時間
          console.log(d);

          注:真實場景中,toString()和toLocaleString()沒有什么用,僅在調試代碼時使用;

          至于valueOf()方法,返回的是毫秒數,因此,可以方便的使用比較操作來比較日期,如:

          console.log(new Date());
          console.log(new Date('Jun 7,2020 13:51:01 +0700'));
          console.log(new Date('Jun 7,2020 13:51:01 (CET)'));   // CET歐洲中部時間

          注意日期比較的慣性思維,如2019.1.1早于2020.2.1日,但后者返回的毫秒數大。

          Date對象方法:

          • Date():返回當日的日期和時間。
          • getDate():從 Date 對象返回一個月中的某一天 (1 ~ 31)。
          • getDay():從 Date 對象返回一周中的某一天 (0 ~ 6)。
          • getMonth():從 Date 對象返回月份 (0 ~ 11)。
          • getFullYear():從 Date 對象以四位數字返回年份。
          • getYear():請使用 getFullYear() 方法代替。
          • getHours():返回 Date 對象的小時 (0 ~ 23)。
          • getMinutes():返回 Date 對象的分鐘 (0 ~ 59)。
          • getSeconds():返回 Date 對象的秒數 (0 ~ 59)。
          • getMilliseconds():返回 Date 對象的毫秒(0 ~ 999)。
          • getTime():返回 1970 年 1 月 1 日至今的毫秒數,與valueOf()返回值相同。
          • getTimezoneOffset():返回本地時間與格林威治標準時間 (GMT) 的分鐘差。
          • getUTCDate():根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。
          • getUTCDay():根據世界時從 Date 對象返回周中的一天 (0 ~ 6)。
          • getUTCMonth():根據世界時從 Date 對象返回月份 (0 ~ 11)。
          • getUTCFullYear():根據世界時從 Date 對象返回四位數的年份。
          • getUTCHours():根據世界時返回 Date 對象的小時 (0 ~ 23)。
          • getUTCMinutes():根據世界時返回 Date 對象的分鐘 (0 ~ 59)。
          • getUTCSeconds():根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。
          • getUTCMilliseconds():根據世界時返回 Date 對象的毫秒(0 ~ 999)。
          • parse():返回1970年1月1日午夜到指定日期(字符串)的毫秒數。
          • setDate():設置 Date 對象中月的某一天 (1 ~ 31)。
          • setMonth():設置 Date 對象中月份 (0 ~ 11)。
          • setFullYear():設置 Date 對象中的年份(四位數字)。
          • setYear():請使用 setFullYear() 方法代替。
          • setHours():設置 Date 對象中的小時 (0 ~ 23)。
          • setMinutes():設置 Date 對象中的分鐘 (0 ~ 59)。
          • setSeconds():設置 Date 對象中的秒鐘 (0 ~ 59)。
          • setMilliseconds():設置 Date 對象中的毫秒 (0 ~ 999)。
          • setTime():以毫秒設置 Date 對象。
          • setUTCDate():根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。
          • setUTCMonth():根據世界時設置 Date 對象中的月份 (0 ~ 11)。
          • setUTCFullYear():根據世界時設置 Date 對象中的年份(四位數字)。
          • setUTCHours():根據世界時設置 Date 對象中的小時 (0 ~ 23)。
          • setUTCMinutes():根據世界時設置 Date 對象中的分鐘 (0 ~ 59)。
          • setUTCSeconds():根據世界時設置 Date 對象中的秒鐘 (0 ~ 59)。
          • setUTCMilliseconds():根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。
          • toSource():返回該對象的源代碼。
          • toString():把 Date 對象轉換為字符串。
          • toTimeString():把 Date 對象的時間部分轉換為字符串。
          • toDateString():把 Date 對象的日期部分轉換為字符串。
          • toGMTString():請使用 toUTCString() 方法代替。
          • toUTCString():根據世界時,把 Date 對象轉換為字符串。
          • toLocaleString():根據本地時間格式,把 Date 對象轉換為字符串。
          • toLocaleTimeString():根據本地時間格式,把 Date 對象的時間部分轉換為字符串。
          • toLocaleDateString():根據本地時間格式,把 Date 對象的日期部分轉換為字符串。
          • toISOString():返回對應的UTC時間的 ISO8601 寫法,如2012-12-31T16:00:00.000Z,
          • toJSON():返回值同toISOString()
          • UTC():根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。
          • valueOf():返回 Date 對象的原始值。

          以上方法大概分為三種:to方法、get方法和set方法。

          to方法-日期格式化方法:

          date()類型還有一些專門用于將日期格式化為字符串的方法,如:

          • toString():
          • toDateString():以特定于實現的格式顯示星期幾、月、日和年;
          • toTimeString():以特定于實現的格式顯示時、分、秒和時區;
          • toLocaleDateString():以特定于地區的格式顯示星期幾、月、日和年;
          • toLocaleTimeString():在特定于地區的格式顯示 時、分、秒;
          • toUTCString():以特定于實現的格式顯示UTC日期;
          • toISOString():返回ISO表示的日期;
          • toGMTString()方法,這是一個與toUTCString()等價的方法,其存在的目的在于確保向后兼容;不過ECMAScript推薦使用toUTCString()方法;

          getter方法:

          用于獲取當前日期時間信息;

          var d = new Date();
          console.log(d.getDate()); //18
          console.log(d.getDay());  //4
          console.log(d.getFullYear()); //2020
          console.log(d.getMonth()); //5 (starts from 0)
          console.log(d.getHours()); //17
          console.log(d.getMinutes()); //30
          console.log(d.getSeconds()) //13
          console.log(d.getMilliseconds()); //765
          console.log(d.getTime()) //1591868420160
          console.log(d.getTimezoneOffset()); //-480 返回以分鐘為單位表示的時區差異

          getTimezoneOffset()方法用于說明某個時區與UTC時間的關系,該方法返回當前時區比UTC提前或落后的分鐘數; 還可以用于判斷該時區是否使用夏令時:

          var d1=new Date(2020, 0, 1);
          var d2=new Date(2020, 6, 1);
          console.log(d1.getTimezoneOffset());  // -480 / 60 = -8小時
          var b=d1.getTimezoneOffset() != d2.getTimezoneOffset();  // 判斷夏令時
          console.log(b);

          這些方法有等效的UTC版本,它們返回UTC值而不是適合您當前時區的值

          var d = new Date();
          console.log(d.getUTCDate()); //18
          console.log(d.getUTCDay());  //4
          console.log(d.getUTCFullYear()); //2020
          console.log(d.getUTCMonth()); //5 (starts from 0)
          console.log(d.getUTCHours()); //9
          console.log(d.getUTCMinutes()); //30
          console.log(d.getUTCSeconds()) //13
          console.log(d.getUTCMilliseconds()); //765

          setter方法:

          var d = new Date();
          d.setDate(6);
          d.setFullYear(2022);
          d.setMonth(4);
          d.setHours(4);
          d.setMinutes(4);
          d.setSeconds(4);
          d.setMilliseconds(123);
          d.setTime(1598765678999);
          console.log(d);

          注:setDate 和 setMonth 從 0 開始編號;

          這些方法基本是跟getter方法一一對應的,但是沒有setDay方法,因為星期幾是計算出來的,而不是設置的;

          set方法中的參數如果超出它的范圍,會進位,稱為冒泡,如:date.setHours(48),這也會將日期數變大;

          var date = new Date();
          date.setFullYear(2022,1,18);
          // date.setMonth(24);
          date.setMonth(2,8);
          date.setHours(16,18,28,208);
          console.log(date.toLocaleString());

          如果參數是負數,表示從上個月的最后一天開始減去相應的單位數:

          以上的方法都有一個相對應的 UTC set方法:

          var d = new Date();
          d.setUTCDate(6);
          d.setUTCFullYear(2022);
          d.setUTCMonth(4);
          d.setUTCHours(4);
          d.setUTCMinutes(4);
          d.setUTCSeconds(4);
          d.setUTCMilliseconds(123);
          console.log(d);

          獲取當前時間戳:

          console.log(new Date().getTime());
          console.log(Date.now());

          Date.now()方法返回表示調用這個方法時的日期和時間的毫秒數;其簡化了Date.getTime()方法,如:

          var start = Date.now();
          for(var i=0;i<100000;i++){} // 模擬其他處理代碼
          var stop = Date.now();
          var result = stop-start;
          alert(result);

          如果有些瀏覽器不支持Date.now(),可以使用+操作符獲取Date對象的時間戳,如:

          var start = +new Date();
          for(var i=0;i<100000;i++){} // 模擬其他處理代碼
          var stop = +new Date();
          var result = stop-start;
          alert(result);

          日期的計算:

          直接加減或通過 Date.getTime() 的值來比較兩個 Date 對象:

          var d1 = new Date("2020-06-18");
          var d2 = new Date("2020-06-19");
          console.log(d1 - d2);  // -86400000
          console.log(d1 + d2);  // 返回兩個日期的字符串拼接
          // 或
          var d1 = new Date('July 18,2020 14:10:18');
          var d2 = new Date('July 19,2020 14:10:18');
          var diff = d2.getTime() - d1.getTime();
          console.log(diff);

          注:getTime() 方法返回以毫秒計的數字,所以需要將當日時刻計入;如:July 18, 2020 14:14:14 不等于July 18, 2020。在這種情況下,可以使用 setHours(0, 0, 0, 0) 來重置當日時刻;

          計算本年度還剩下多少天:

          function leftDays() {
            var today = new Date();
            var endYear = new Date(today.getFullYear(), 11, 31, 23, 59, 59, 999);
            var msPerDay = 24 * 60 * 60 * 1000;
            return Math.round((endYear.getTime() - today.getTime()) / msPerDay);
          }
          console.log(leftDays());

          小練習:

          // 中文月份和星期
          var d = new Date();
          var month = d.getMonth();
          var week = d.getDay();
          var monthArr = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
          var weekArr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
          console.log(monthArr[month]);
          console.log(weekArr[week]);
           
          // 獲取日期部分信息
          Date.prototype.datePart = function(part){
              if(!part)
                  part = 'd';
              var weekArr = ['日','一','二','三','四','五','六'];
              switch(part){
                  case 'Y':
                  case 'y': 
                      return this.getFullYear(); 
                      break;
                  case 'M': 
                      return this.getMonth + 1;
                      break;
                  case 'W':
                  case 'w':
                      return weekArr[this.getDay()];
                      break;
                  case 'D':
                  case 'd':
                      return this.getDate();
                      break;
                  case 'H':
                  case 'h':
                      return this.getHours();
                      break;
                  case 'm':
                      return this.getMinutes();
                      break;
                  case 's':
                      return this.getSeconds();
                      break;
                  default:
                      return this.getDate();
              }
              return this.getDate();
          }
          console.log(new Date().datePart('d'));

          還有多長時間退休:

          // 一個人到退休還有多長時間
          function retireDays(birthday,age){
              var d1 = new Date(birthday).getFullYear();
              var d2 = new Date().getFullYear();
              var old = d2 - d1;
              console.log("現在你的年齡是:" + old,",將于" + (d1 + age) + "退休");
              if(age - old > 0){
                  console.log("還差"+(age - old)+"年退休")
              }else{
                  console.log("你已經退休啦,好好享受老年生活吧");
              }
          }
          retireDays('2020.6.6',60);

          倒計時:

          <!-- 網頁時鐘 -->
          <p id="mydate"></p>
          <script>
          function checkTime(i){
              if(i<10)
                  i = '0' + i;
              return i;
          }
          function startTime(){
              var d = new Date();
              var h = d.getHours();
              var m = checkTime(d.getMinutes());
              var s = checkTime(d.getSeconds());
              document.getElementById('mydate').innerHTML = h + ':' + m + ':' + s;
              timer = setTimeout('startTime()', 1000);
          }
          startTime();
           
          // 倒計時
          function getCountDown(d){
              var d1 = new Date();
              var d2 = new Date(d);  // 
              var diff = d2 - d1;     // 相差毫秒數
              var o = {};
              if(diff >= 0){
                  var day = Math.floor(diff / 1000 / 60 / 60 / 24);  // 剩下多少天
                  var hour = Math.floor(diff / 1000 / 60 / 60 % 24);   // 剩下多少小時
                  var minute = Math.floor(diff / 1000 / 60 % 60);     // 剩下多少分
                  var second = Math.floor(diff / 1000 % 60);  // 剩下多少秒
                  o.stop = false;
                  o.str = "距離"+d+",還剩下"+day+"天"+hour+"小時"+minute+"分"+second+"秒";
              }else{
                  o.stop = true;
                  o.str = "已時結束";
              }
              return o;
          }
          var timer = setInterval(function(){
              var mydate = document.getElementById('mydate');
              mydate.innerHTML = getCountDown('2020.6.8').str;
              if(getCountDown('2020.6.8').stop) clearInterval(timer);
          },1000);

          計算某個日期加上天數:

          // 計算加幾天后的日期,days可以使用負數
          // 如果計算月份,是一樣的原理
          function addDate(date,days){
              var d = new Date(date);
              d.setDate(d.getDay() + days);
              var month = d.getMonth() + 1;
              var day = d.getDate();
              if(month < 10)
                  month = "0" + month;
              if(day < 10)
                  day = "0" + day;
              var value = d.getFullYear() + "-" + month + "-" + day;
              return value;
          }
          console.log(addDate('2020-6-6',50));
          console.log(addDate('2020-6-6',-6));

          小練習:

          // 判斷閏年:四年一閏,百年不閏,四百年再閏
          Date.prototype.isLeapYear = function(){
              return (this.getFullYear() % 4 == 0 && ((this.getFullYear() % 100 !=0) || (this.getFullYear() % 400 == 0)));
          }
          var d = new Date();
          console.log(d.isLeapYear());
          d.setFullYear(2019);
          console.log(d.isLeapYear());
           
          // 計算兩個日期的天數差
          function daysDiff(dateOne,dateTwo){
              var oneMonth = dateOne.substring(5, dateOne.lastIndexOf('-'));
              var oneDay = dateOne.substring(dateOne.length,dateOne.lastIndexOf('-') + 1);
              var oneYear = dateOne.substring(0, dateOne.indexOf('-'));
              var twoMonth = dateTwo.substring(5, dateTwo.lastIndexOf('-'));
              var twoDay = dateTwo.substring(dateTwo.length, dateTwo.lastIndexOf('-') + 1);
              var twoYear = dateTwo.substring(0, dateTwo.indexOf('-'));
              var diff = ((Date.parse(oneMonth+'/'+oneDay+'/'+oneYear) - Date.parse(twoMonth+'/'+twoDay+'/'+twoYear)) / 86400000);
              return diff;
          }
          console.log(daysDiff('2020-6-6','2020-5-30'));

          格式化輸出:

          Date.prototype.format = function(fmt){
              var o = {
                  "M+" : this.getMonth() + 1,
                  "d+" : this.getDate(),
                  "h+" : this.getHours(),
                  "m+" : this.getMinutes(),
                  "s+" : this.getSeconds(),
                  "q+" : Math.floor((this.getMonth() + 3) / 3),
                  "S"  : this.getMilliseconds()
              };
              if(/(y+)/.test(fmt)){
                  fmt = fmt.replace(RegExp.$1,
                      (this.getFullYear() + "").substr(4 - RegExp.$1.length));
              }
              for(var k in o){
                  if(new RegExp("(" + k + ")").test(fmt)){
                      fmt = fmt.replace(RegExp.$1,
                          RegExp.$1.length ===1
                              ? o[k]
                              : ("00" + o[k]).substr(("" + o[k]).length));
                  }
              }
              return fmt;
          };
          var d = new Date(2020,6,6,0,0,0);
          console.log(d);
          console.log(d.format('yyyy年MM月dd日'));  // 2020年07月06日
          console.log(d.format('yyyy年MM月d日 hh:mm:ss'));  // 2020年07月6日 00:00:00

          Intl對象:

          Intl 對象是 ECMAScript 國際化 API 的一個命名空間,它提供了精確的字符串對比(Collator ),數字格式化(NumberFormat),日期和時間格式化(DateTimeFormat)等對象。

          var date = new Date();
          console.log(date);
          console.log(Intl.DateTimeFormat().format(date));  // 2020/7/22
          console.log(new Intl.DateTimeFormat('en-US').format(date));  // 6/7/2020

          Intl對象的屬性:

          • Intl.Collator:collators的構造函數,用于啟用對語言敏感的字符串比較的對象。
          • Intl.DateTimeFormat:用于啟用語言敏感的日期和時間格式的對象的構造函數。
          • Intl.ListFormat:啟用語言敏感列表格式的對象的構造函數。
          • Intl.NumberFormat:用于啟用語言敏感數字格式的對象的構造函數。
          • Intl.PluralRules:用于啟用多種敏感格式和多種語言語言規則的對象的構造函數。
          • Intl.RelativeTimeFormat:對象的構造函數,該對象啟用對語言敏感的相對時間格式。

          Intl.DateTimeFormat:

          語法:

          new Intl.DateTimeFormat([locales[, options]])
          Intl.DateTimeFormat([locales[, options]])

          參數:

          locales:可選,縮寫語言代碼(BCP 47 language tag),如:cmn-Hans-CN)的字符串或者這些字符串組成的數組;

          兩種擴展的格式:language[-scripts][-region]-u-nu-* 和 language[-scripts][-region]-u-ca-* ;例如:zh-u-nu-hanidec(表示中文十進制數字) 和 zh-u-ca-chinese(表示中國日歷,比如壬辰年冬月8日) ,也可以 nu 和 ca 組合使用,如使用:zh-u-ca-chinese-nu-hanidec 格式化Date.now()的返回值類似于"丙申年冬月九日";

          nu:編號系統,可能的值包括:

          "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".

          ca:日歷,可能的值包括:

          "buddhist", "chinese", "coptic", "ethioaa", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc".

          var date = new Date();
          // 韓國使用 year-month-day 格式
          console.log(new Intl.DateTimeFormat('ko-KR').format(date));
          // 2020. 6. 18
           
          //大部分阿拉伯國家使用阿拉伯字母(real Arabic digits)
          console.log(new Intl.DateTimeFormat('ar-EG').format(date));
          // "???/???/????"
           
          //在日本,應用可能想要使用日本日歷,
          //2020 是平成32年(平成是是日本天皇明仁的年號,由1989年1月8日起開始計算直至現在)
          console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date));
          // 類似"平成32/6/20"
           
          //當請求一個語言可能不支持,如巴厘(ban),若有備用的語言印尼語(id),
          //那么將使用印尼語(id)
          console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
          // "20/6/2020"
           
          console.log(new Intl.DateTimeFormat('zh-CN').format(date));  // 2020/6/11
          console.log(new Intl.DateTimeFormat('zh-u-nu-hanidec').format(date)); //二〇二〇/六/一一
          console.log(new Intl.DateTimeFormat('zh-u-ca-chinese').format(date));//37/閏4/20
          console.log(new Intl.DateTimeFormat('zh-u-ca-chinese-nu-hanidec').format(date));//三七/閏四/二〇

          options參數:

          可選,自定義輸出,包含一些或所有的下面屬性:

          localeMatcher:

          使用的local的匹配算法. 可能的值有"lookup"和"best fit"; 默認值 "best fit";

          timeZone:

          使用的時區. 這唯一的值實現必須被標準世界時間(UTC)所識別。默認值是運行時的默認時區. IANA time zone database中的時區名稱可能會被識別, 例如"Asia/Shanghai", "Asia/Kolkata", "America/New_York";

          hour12:

          是否使用12小時時間制(而不是24小時的時間),值是true 或 false; 默認值是根據locale來自動決定的(中國地區的默認值為true);

          formatMatcher:

          format的匹配算法,值有"basic"和"best fit",默認值是"best fit";

          日期時間插件被格式化輸出時可以使用的屬性集合描述。實現需要支持是以下子集中的其中一個:

          • weekday, year, month, day, hour, minute, second
          • weekday, year, month, day
          • year, month, day
          • year, month
          • month, day
          • hour, minute, second
          • hour, minute

          實現可能支持其他的子集,并通過對所有可用的子集對比找到最匹配的子集。通過 formatMatcher屬性可以設置兩種算法用于對比和選擇子集: 完全匹配"basic"算法和一種依賴于“best fit”算法的實現;

          • weekday:工作日的展現方式.可能的值有 "narrow", "short", "long".
          • era:紀元的展現方式. 可能的值有 "narrow", "short", "long".
          • year:年的展現方式. 可能的值有 "numeric", "2-digit".
          • month:月的展現方式. 可能的值有 "numeric", "2-digit", "narrow", "short", "long".
          • day:日的展現方式.可能的值有 "numeric", "2-digit".
          • hour:時的展現方式.可能的值有 "numeric", "2-digit".
          • minute:分鐘的展現方式.可能的值有 "numeric", "2-digit".
          • second:秒的展現方式. 可能的值有"numeric", "2-digit".
          • timeZoneName:時區名稱的展現方式.可能的值有 "short", "long".

          每個日期時間組件屬性的默認值都是undefined,但是若所有的組件屬性都是undefined,那么year, month和day的值就都被認為是"numeric";

          var date = new Date();
          var options = {year:'numeric',month:'numeric',day:'numeric',hour:'numeric',minute:'numeric',second:'numeric'};
          console.log(new Intl.DateTimeFormat('en-US').format(date));  // 6/7/2020
          console.log(new Intl.DateTimeFormat('en-US',options).format(date));  // 6/7/2020, 3:07:31 PM
          console.log(new Intl.DateTimeFormat('it-IT').format(date));  // 7/6/2020
          console.log(new Intl.DateTimeFormat('it-IT',options).format(date));  // 7/6/2020, 15:08:34
           
          var date = new Date(Date.UTC(2020, 6, 18, 6, 30, 18));
           
          //請求參數(options)中包含參數星期(weekday),并且該參數的值為長類型(long)
          var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
          console.log(new Intl.DateTimeFormat('zh-CN', options).format(date));
          console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
          // Samstag, 18. Juli 2020
           
          // 一個應用使用 世界標準時間(UTC),并且UTC使用短名字(short)展示
          options.timeZone = 'UTC';
          //若不寫這一行那么仍然顯示的是世界標準時間;但是UTC三個字母不會顯示
          options.timeZoneName = 'short';
          console.log(new Intl.DateTimeFormat('en-US', options).format(date));
          // Saturday, July 18, 2020, UTC
           
          // 更精確的定義
          options = {
            hour: 'numeric', minute: 'numeric', second: 'numeric',
            timeZoneName: 'short'
          };
          console.log(new Intl.DateTimeFormat('en-US', options).format(date));
          // 12:30:18 PM GMT+8
           
          // 使用24小時制
          options = {
            year: 'numeric', month: 'numeric', day: 'numeric',
            hour: 'numeric', minute: 'numeric', second: 'numeric',
            hour12: false
          };
          console.log(date.toLocaleString('en-US', options));  // 7/18/2020, 14:30:18
          console.log(date.toLocaleString('zh-CN', options));  // 2020/7/18 14:30:18

          日期插件庫:

          Datejs 是一個開源的JavaScript庫,用來解析、格式化和處理日期數據,支持多種語言的日期格式處理;官網:www.datejs.com/

          Moment.js 是一個簡單易用的輕量級JavaScript日期處理類庫,提供了日期格式化、日期解析等功能。它支持在瀏覽器和NodeJS兩種環境中運行;

          date-fns庫:現代 JavaScript 日期實用程序庫。date-fns 提供了最全面,最簡單和一致的工具集,用于在瀏覽器和 Node.js 中操作 JavaScript 日期;官網:date-fns.org

          Prettydate 是一個 jQuery 用來顯示一些用戶友好的日期格式的插件,例如Posted 2 days ago by John Resig;

          Countdown是jQuery的一個用于顯示倒計時的插件;

          XDate是一個對Javascirpt本地Date對象的輕度包裝,它提供對日期的解析、格式化以及其他操作的較強功能;

          DP_DateExtensions庫繼承了JavaScript的Date對象,并添加了一些新特性和功能;

          組件類:

          layDate 日期與時間組件,layDate 是 layui 獨立維護的三大組件之一;官網:www.layui.com/laydate/。


          Web前端開發之Javascript-零點程序員-王唯

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


          一. Date 類型

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

          創建一個日期對象,使用 new 運算符和 Date 構造方法(構造函數)即可。

          var box=new Date(); //創建一個日期對象

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

          alert(box); //不同瀏覽器顯示不同

          ECMAScript 提供了兩個方法,Date.parse()和 Date.UTC()。Date.parse()方法接收一個表示日期的字符串參數,然后嘗試根據這個字符串返回相應的毫秒數。

          Date.parse()應該支持哪種日期格式,因此方法的行為因實現而異,因地區而異。默認通常接收的日期格式如下:

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

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

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

          alert(Date.parse('6/13/2011')); //1307894400000

          如果 Date.parse()沒有傳入或者不是標準的日期格式,那么就會返回 NaN。

          alert(Date.parse()); //NaN

          如果想輸出指定的日期,那么把 Date.parse()傳入 Date 構造方法里。

          var box=new Date(Date.parse('6/13/2011'));//Mon Jun 13 2011 00:00:00 GMT+0800

          var box=new Date('6/13/2011'); //直接傳入,Date.parse()后臺被調用

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

          alert(Date.UTC(2011,11)); //1322697600000

          如果 Date.UTC()參數傳遞錯誤,那么就會出現負值或者 NaN 等非法信息。

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

          如果要輸出指定日期,那么直接把 Date.UTC()傳入 Date 構造方法里即可。

          var box=new Date(Date.UTC(2011,11, 5, 15, 13, 16));

          二. 通用的方法

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

          var box=new Date(Date.UTC(2011,11, 5, 15, 13, 16));

          alert('toString:' + box.toString());

          alert('toLocaleString:' + box.toLocaleString()); //按本地格式輸出

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

          三. 日期格式化方法

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

          var box=new Date();

          alert(box.toDateString()); //以特定的格式顯示星期幾、月、日和年

          alert(box.toTimeString()); //以特定的格式顯示時、分、秒和時區

          alert(box.toLocaleDateString()); //以特定地區格式顯示星期幾、月、日和年

          alert(box.toLocaleTimeString()); //以特定地區格式顯示時、分、秒和時區

          alert(box.toUTCString()); //以特定的格式顯示完整的 UTC 日期。

          四. 組件方法

          組件方法,是為我們單獨獲取你想要的各種時間/日期而提供的方法。需要注意的時候 ,這些方法中,有帶 UTC 的,有不帶 UTC 的。UTC 日期指的是在沒有時區偏差的情況下的日期值。

          alert(box.getTime()); //獲取日期的毫秒數,和 valueOf()返回一致

          alert(box.setTime(100)); //以毫秒數設置日期,會改變整個日期

          alert(box.getFullYear()); //獲取四位年份

          alert(box.setFullYear(2012)); //設置四位年份,返回的是毫秒數

          alert(box.getMonth()); //獲取月份,沒指定月份,從 0 開始算起

          alert(box.setMonth(11)); //設置月份

          alert(box.getDate()); //獲取日期

          alert(box.setDate(8)); //設置日期,返回毫秒數

          alert(box.getDay()); //返回星期幾,0 表示星期日,6 表示星期六

          alert(box.setDay(2)); //設置星期幾

          alert(box.getHours()); //返回時

          alert(box.setHours(12)); //設置時

          alert(box.getMinutes()); //返回分鐘

          alert(box.setMinutes(22)); //設置分鐘

          alert(box.getSeconds()); //返回秒數

          alert(box.setSeconds(44)); //設置秒數

          alert(box.getMilliseconds()); //返回毫秒數

          alert(box.setMilliseconds()); //設置毫秒數

          alert(box.getTimezoneOffset()); //返回本地時間和 UTC 時間相差的分鐘數

          注: 以上方法除了 getTimezoneOffset(), 其他都具有 UTC 功能, 例如 setDate()及 getDate()獲取星期幾,那么就會有 setUTCDate()及 getUTCDate()。表示世界協調時間。

          最后附上代碼


          主站蜘蛛池模板: 日本一区二区三区在线视频观看免费| 综合人妻久久一区二区精品| 少妇人妻精品一区二区| 无码人妻一区二区三区免费手机| 亚洲av综合av一区二区三区 | 国产成人精品一区二区秒拍 | 精品无码一区二区三区在线| 久久久99精品一区二区| 日本免费一区尤物| 色综合视频一区二区三区44| 3d动漫精品啪啪一区二区中| 精品伦精品一区二区三区视频 | 国产午夜一区二区在线观看| 日本一区二区不卡在线| 久久精品国产免费一区| 波多野结衣高清一区二区三区| 蜜桃视频一区二区三区| 日韩毛片一区视频免费| 精品天海翼一区二区| 麻豆精品一区二区综合av| 国产一区中文字幕在线观看 | 久久国产精品最新一区| 日本欧洲视频一区| 国产精品美女一区二区视频| 亚洲熟妇av一区二区三区漫画| 国产高清精品一区| 中文字幕在线观看一区二区 | 人妻无码一区二区三区AV| 亚洲一区影音先锋色资源| 亚洲AV无码一区二区乱孑伦AS| 亚洲av一综合av一区| 亚洲国产高清在线精品一区| 在线播放偷拍一区精品| 免费高清在线影片一区| 日韩一区二区三区在线观看 | 在线观看中文字幕一区| 无遮挡免费一区二区三区| 国精无码欧精品亚洲一区| 亚洲国产精品一区| 风间由美在线亚洲一区| 亚洲AV无码一区二区三区人|