JavaScript基礎之內置對象——日期對象Date

JavaScript中的內置對象有Math、Date、String、Array。

內置對象就是Javascript語言已經給我們提供好的，自帶的一些對象，可以供我們直接使用的。這些對象還提供了一些常用的或基本使用的功能，也就是對象的屬性和方法。

就像我們去買一個手機，裏面的視像頭、相機、電池等都是安裝好的，我們可以直接使用的，不需要我們自己去下載安裝。

主要學習這些對象常用的方法。

注意：  創建一個 JavaScript Date 實例，該實例呈現時間中的某個時刻。Date對象則基於 Unix Time Stamp，即自1970年1月1日（UTC）起經過的毫秒數。 

 

對象的實例化：代表使用對象時必須要new 關鍵字。 

 日期對象，我們常用的功能就是實現倒計時的效果。在文章最後，會封裝一個倒計時的函數。

Date實例化

無參數：返回的是當前時間

var nowTime = new Date(); 

有參數：返回的是接收的參數的時間

       傳參數有兩種形式：字符串、數值

        var timer = new Date('2020-2-30 12:00:00');

        var timer2 = new Date(2020, 10, 25);

返回的月份比實際月份多1.

月份是（0~11）

        var nowTime = new Date();
        console.log(nowTime);
        // 有參數：返回的是參數的時間
        var timer = new Date('2020-2-30 12:00:00');
        console.log(timer);
        var timer2 = new Date(2020, 10, 25);
        console.log(timer2); // 返回的是11月  不是10月

 

 

 

 

Date日期格式化

按照我們中國人的習慣，我們更喜歡的日期是 2020年2月29日，而不是上面默認的輸出方式。

所有我們需要用到對象的方法，去獲取年月日，再使用字符串拼接的方式輸出。

常用方法：

 

 代碼實現：

         // 格式化日期： 輸出 2020 年 2 月 28 號 星期五
        var time = new Date(); // Date 是構造函數 使用之前必須要有這句話
        var year = time.getFullYear();
        console.log(year); // 輸出當前 年
        // 因爲月是0~11 所有月份要+1 喲
        var month = time.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        console.log(month); // 輸出1 不是2  因爲月是0~11 所有月份要+1 喲    
        var day = time.getDate();
        console.log(day); // 輸出的是28 
        console.log('今天是：' + year + '年' + month + '月' + day + '日');
        var week = time.getDay();
        console.log(week); // 輸出的是5  爲不是五 
        // var weeks = new Date('2020-2-30');
        // console.log(weeks.getDay()); // 輸出的是0  因爲星期日是0  一週七天 0~6

效果圖：

一週七天，星期日返回的是0，爲了方便輸出，我們可以把星期一到星期日存放到一個數組中，切記第一個放星期日（索引號爲0）

這樣的話我們就可以，完整的輸出當前日期了

   <script>
        
        // 格式化日期： 輸出 2020 年 2 月 28 號 星期五
        var time = new Date(); // Date 是構造函數 使用之前必須要有這句話
        var year = time.getFullYear();
        console.log(year); // 輸出當前 年
        // 因爲月是0~11 所有月份要+1 喲
        var month = time.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        console.log(month); // 輸出1 不是2  因爲月是0~11 所有月份要+1 喲    
        var day = time.getDate();
        console.log(day); // 輸出的是28 
        console.log('今天是：' + year + '年' + month + '月' + day + '日');



        var week = time.getDay();
        console.log(week); // 輸出的是5  爲不是五 
        // var weeks = new Date('2020-2-30');
        // console.log(weeks.getDay()); // 輸出的是0  因爲星期日是0  一週七天 0~6
        // 爲了讓星期更好的輸出，我們把一週七天存儲在一個數組中
        var weekTimes = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        // 通過week返回的數值，去數組中找對應的索引從而返回數組的內容
        console.log(weekTimes[week]);
        console.log('今天是：' + year + '年' + month + '月' + day + '日' + weekTimes[week]);
    </script>

 

這是當前時間的輸出，若是想返回不同時間，只需在實例化對象時傳參數即可。

倒計時函數

在這裏我們要說一個時間戳

一個 Unix 時間戳（Unix Time Stamp），它是一個整數值，表示自1970年1月1日00:00:00 UTC（the Unix epoch）以來的毫秒數，忽略了閏秒

時間戳通俗來講就是，從1970年1月1日到此時此刻，過去了多少毫秒。過去的時間是無法返回的，具有不可替代性和不可重複性，這個數值是唯一的。所有，我們要做的倒計時效果，就是利用了時間戳的原理。

還有一點需要注意，當數值小於10時，我們需要在數值前面補0，這樣符合我們中國人的習慣，而且排版也更好看。 

製作思路：

1. 倒計時核心算法：輸入的時間減去現在的時間就是剩餘的時間，即倒計時。但是不能拿時分秒去減秒，就像5分18秒和4分50秒，結果會得負數的。

2. 所有用時間戳來做，輸入時間的總毫秒數減去現在時間總毫秒數就是剩餘時間毫秒數。

3. 最後用毫秒數轉化爲天、時、分、秒 

下面封裝一個倒計時的函數：

 <script>
        // 時間戳轉換年月日，時分秒
        // 總秒數 = 總毫秒 / 1000
        // 當前秒數 = 總秒數 % 60
        // 分 = 總秒數 / 60 % 60
        // 時 = 總秒數 / 60 / 60 % 24
        // 天 = 總秒數 / 60 / 60 / 24
        // 用輸入的總毫秒數-現在的毫秒數 就是倒計時的效果 
        // 做出 01天 02時 01分 58秒類似的效果
        function countDown(time) {
            var nowTime = +new Date(); //返回的是現在的時間的總的毫秒數
            var inputTimers = +new Date(time); //返回的是用戶輸入時間的總的毫秒數
            var titMs = (inputTimers - nowTime) / 1000; // 總秒數
            var sec = parseInt(titMs % 60); //當前秒
            sec = sec < 10 ? '0' + sec : sec;
            var min = parseInt(titMs / 60 % 60); //當前分
            min = min < 10 ? '0' + min : min;
            var hours = parseInt(titMs / 60 / 60 % 60); //當前時
            hours = hours < 10 ? '0' + hours : hours;
            var day = parseInt(titMs / 60 / 60 / 24); //當前天
            day = day < 10 ? '0' + day : day;
            return day + '天' + hours + '時' + min + '分' + sec + '秒';

        }

        console.log(countDown('2020-2-29 10:00:00'));
        var date = new Date();
        console.log(date);
    </script>

測試結果：

 

 

Date常用的功能之一——倒計時效果，今天完成啦！！！！

下一步就要學習數組嘍！！！！

加油加油加油鴨！！！！！