【重溫基礎】7.時間物件

pingan8787發表於2019-02-16
物件

本文是 重溫基礎 系列文章的第七篇。
今日感受：做好自律。

系列目錄：

本章節複習的是JS中的時間物件，一些處理的方法。

前置知識：
JavaScript中的時間是以1970年1月1日00:00:00以來的毫秒數來儲存資料型別。
Data物件的範圍是相對距離UTC1970年1月1日的前後100,000,000天。
建立一個時間物件：

let d = new Date([params]);

引數params可以是：

  • 無引數：預設建立今天的日期和時間。
  • 一個符合以下格式的表示日期的字串:

“月 日, 年 時:分:秒.”或者”年月日 時分秒”

let d = new Date("2018-12-20");

如果你省略時、分、秒，那麼他們的值將被設定為0。

  • 一個年，月，日的整型值的集合：
let d = new Date(2018, 12, 20);
  • 一個年，月，日，時，分，秒的集合：
let d = new Date(2018, 12, 20, 23, 20, 10);

這裡Date物件涉及到的方法特別多，請移步W3school JavaScript Date 物件

1.Date物件的方法

常用處理的方法有以下幾類：

  • “set“：用於設定Date物件的日期和時間的值。
  • “get“：用去獲取Date物件的日期和時間的值。
  • “to“：用於返回Date物件的字串格式的值。
  • “parse和UTC“：用於解析Date字串。

需要注意的Date物件的一些數值問題：

  • 秒/分： 0 – 59；
  • 時： 0 – 23；
  • 星期： 0(週日) – 6(週六)
  • 日期： 1 – 31
  • 月份： 0(一月) – 11(十二月)
  • 年份： 從1900開始的年數

例如：

let d = new Date(`2018-12-10`);
let d1 = d.getMonth();    // 11
let d2 = d.getFullYear(); // 2018

獲取今年剩下的天數：

let d = new Date();
let e = new Date(2018, 11, 31, 23, 59, 59, 999);  // 設定年月日時分秒
e.setFullYear(d.getFullYear); // 設定為今年
let m = 24 * 60 * 60 * 1000;  // 每日毫秒數
let result = (e.getTime() - d.getTime()) / m;
result = Math.round(result);  // 返回今年剩餘天數

這裡Date物件涉及到的方法特別多，請移步W3school JavaScript Date 物件

注意：

格林尼治標準時間(GMT)英國、愛爾蘭、冰島和葡萄牙屬於該時區。這個時區與中國北京時間的時差是8個小時，也就是說比北京時間晚8個小時。

2.使用Date物件

2.1 設定日期

為一個時間物件設定指定日期（2018年12月20日），注意這裡：和前面說的一樣，12月在JS的Date物件中，是用11表示。

let d = new Date();
d.setFullYear(2018,11,20);

設定時間物件10天以後：

let d = new Date();
d.setDate(d.getDate() + 10); // 先獲取當天的日期，再設定到指定天數以後

2.2 比較時間

通常情況下，像下面這樣簡單比較：

let d = new Date();
let e = new Date();
d.setFullYear(2018,10,10);
let r = d > e ? `good` : `nice` ; // nice

還可以比較兩個日期相差多少天：

let d1 = new Date(`2018-10-10`);
let d2 = new Date(`2018-11-11`);
let d3 = (d2 - d1) / (1000 * 60 * 60 * 24);  // 32

2.3 計算N天后星期幾

function d (num){
    if(typeof Number(num) === `number`){
        let d1 = new Date();
        let d2 = d1.setDate(d1.getDate() + Number(num));
        let n = new Date(d2).getDay();
        let s = ``;
        switch (n){
            case 0 : 
                s = "星期天";
                break;
            case 1 : 
                s = "星期一";
                break;
            case 2 : 
                s = "星期二";
                break;
            case 3 : 
                s = "星期三";
                break;
            case 4 : 
                s = "星期四";
                break;
            case 5 : 
                s = "星期五";
                break;
            case 6 : 
                s = "星期六";
                break;
        }
        return s;
    }else {
        alert(`請輸入正確數字！`);
    }
}

2.4 格式化日期

常見的日期格式化為字串的方法有這些：

  • toDateString()——以特定於實現的格式顯示星期幾、月、日和年；
  • toTimeString()——以特定於實現的格式顯示時、分、秒和時區；
  • toLocaleDateString()——以特定與地區的格式顯示星期幾、月、日和年；
  • toLocaleTimeString()——以特定於實現的格式顯示時、分、秒；
  • toUTCString()——以特定於實現的格式完整的UTC日期。

獲取並格式化日期：年-月-日：

function d (date){
    return date.getFullYear() + `-` + (date.getMonth() + 1) + `-` + date.getDate();
}
d(new Date()); // "2018-12-20"

日期字串轉為 年-月-日：

function d (str){
    return new Date(Date.parse(str.replace(/-/g, `/`)));
    // 或者
    // return new Date(str.replace(/-/g, `/`));
}

獲取當前星期幾：

let d = "今天是星期" + "日一二三四五六".charat(new Date().getDay());

2.5 獲取某年某月的天數

這裡有個小技巧，若給new Date()傳入一個如aaaa/aa/0引數時，可以得到aa月的前一個月的最後一天，如傳入2018/12/0會得到2018/11/30。

值得注意的是： 在Chrome瀏覽器上並不支援，會返回Invalid Date導致結果為NaN，但是我們可以使用aaaa,aa,0形式作為引數，下面分別寫出這兩種：

// aaaa/aa/0形式 只要傳入年和月 
function d (y, m){
    m = parseInt(m, 10) + 1;
    let r = new Date(y + `/` + m + `/0`);
    return r.getDate();
}

// aaaa,aa,0形式 只要傳入年和月 
function d (y, m){
    m = parseInt(m, 10) + 1;
    let r = new Date(y, m, 0);
    return r.getDate();
}

2.6 獲取上個月/下個月日期(“yyyy-mm-dd”)

傳入引數的格式”yyyy-mm-dd”，其實也可以是Date()物件，大家可以自行嘗試。

// 上個月 date格式"yyyy-mm-dd"
function my_date (date){
    let arr = date.split(`-`);
    let y = arr[0] , m = arr[1], d = arr[2];  // 獲取當前的年月日
    // ES6語法 let [y,m,d] = arr;
    let day = new Date(y,m,0);
    day = day.getDate(); // 獲取當前月份的天數

    let y2 = y, m2 = parseInt(m) - 1;
    if(m2 == 0){
        y2 = parseInt(y2) -1;
        m2 = 12;
    }

    let d2 = d, day2 = new Date(y2, m2, 0);
    day2 = day2.getDate();
    if(d2 > day2){
        d2 = day2;
    }
    if(m2 < 10){
        m2 = `0` + m2;
    }

    return y2 + `-` + m2 + `-` + d2;
}
my_date(`2018-1-20`);  //"2017-12-20"

下個月的計算方法也是相似：

// 上個月 date格式"yyyy-mm-dd"
function my_date (date){
    let arr = date.split(`-`);
    let y = arr[0] , m = arr[1], d = arr[2];  // 獲取當前的年月日
    let day = new Date(y,m,0);
    day = day.getDate(); // 獲取當前月份的天數

    // 和計算上個月的區別   
    let y2 = y, m2 = parseInt(m) + 1;
    if(m2 == 13){   
        y2 = parseInt(y2) + 1;
        m2 = 1;
    }

    let d2 = d, day2 = new Date(y2, m2, 0);
    day2 = day2.getDate();
    if(d2 > day2){
        d2 = day2;
    }
    if(m2 < 10){
        m2 = `0` + m2;
    }

    return y2 + `-` + m2 + `-` + d2;
}
my_date(`2018-12-20`);  // "2019-01-20"

參考資料

1.MDN 數字和日期
2. JS日期Date詳解與例項擴充套件

本部分內容到這結束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推薦 https://github.com/pingan8787…
JS小冊 js.pingan8787.com

歡迎關注微信公眾號【前端自習課】每天早晨，與您一起學習一篇優秀的前端技術博文 .

相關文章