詳解 JS 取當前時間

在前端開發中，取當前時間是一個非常常見的需求。JS 提供了多種方式來獲取當前時間。本文將從多個方面來詳細闡述 JS 取當前時間的方法和應用場景。

一、使用 Date() 方法獲取當前時間

Date() 是 JS 中獲取當前時間最基礎的方法。它返回的是當前時間的時間戳，可以根據時間戳來獲取具體的年月日時分秒。

    
        let now = new Date(); // 獲取當前時間
        let year = now.getFullYear(); // 獲取當前年份
        let month = now.getMonth() + 1; // 獲取當前月份，加「1」是因為月份是從0開始計算的，但實際月份是從1開始的
        let day = now.getDate(); // 獲取當前日期
        let hour = now.getHours(); // 獲取當前小時數
        let minute = now.getMinutes(); // 獲取當前分鐘數
        let second = now.getSeconds(); // 獲取當前秒數
        let millisecond = now.getMilliseconds(); // 獲取當前毫秒數
        let time = now.getTime(); // 獲取當前時間的時間戳
    

使用 Date() 方法獲取當前時間，可以適用於大部分需要獲取時間的場景。例如，可以根據獲取的年月日時分秒來自定義顯示時間的格式。

二、使用 moment.js 庫獲取當前時間

moment.js 是一個非常常見的 JS 庫，用於方便地獲取當前時間和操作時間。相對於 Date() 方法，moment.js 在格式化顯示時間方面更加便捷。在實際開發中，比較常見的使用場景是處理不同時區的時間顯示問題。

    
        let now = moment(); // 獲取當前時間
        let year = now.format('YYYY'); // 獲取當前年份
        let month = now.format('MM'); // 獲取當前月份
        let day = now.format('DD'); // 獲取當前日期
        let hour = now.format('HH'); // 獲取當前小時數
        let minute = now.format('mm'); // 獲取當前分鐘數
        let second = now.format('ss'); // 獲取當前秒數
        let millisecond = now.format('SSS'); // 獲取當前毫秒數
    

使用 moment.js 庫，可以方便地根據需要來格式化顯示時間。例如，可以格式化為「YYYY-MM-DD HH:mm:ss」這樣的標準時間格式。

三、使用 setInterval() 方法實現動態顯示時間

setInterval() 方法是 JS 中常用的定時器方法，可以在一定的時間間隔內執行指定的函數。使用 setInterval() 方法可以實現動態顯示當前時間的功能。

    
        let timeBox = document.getElementById('timebox');

        function showTime() {
            let now = new Date();
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            let day = now.getDate();
            let hour = now.getHours();
            let minute = now.getMinutes();
            let second = now.getSeconds();
            let timeStr = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
            timeBox.innerText = timeStr;
        }

        setInterval(showTime, 1000); // 每秒執行一次 showTime() 函數
    

使用 setInterval() 方法可以實現當前時間的實時更新，適用於需要實時顯示時間的場景。例如，可以將其用於直播、在線考試等場景中。

四、使用 setTimeout() 方法實現倒計時

setTimeout() 方法也是 JS 中常用的定時器方法，可以在指定的時間後執行指定的函數。使用 setTimeout() 方法可以實現倒計時的功能。

    
        let countDownBox = document.getElementById('countdown');
        let endTime = new Date('2021/12/31 23:59:59'); // 倒計時結束時間

        function countDown() {
            let nowTime = new Date();
            let diffTimeSeconds = parseInt((endTime - nowTime) / 1000); // 獲取剩餘時間（單位：秒）
            if (diffTimeSeconds <= 0) {
                countDownBox.innerText = '倒計時結束！';
            } else {
                let hours = parseInt(diffTimeSeconds / 3600);
                let minutes = parseInt((diffTimeSeconds - hours * 3600) / 60);
                let seconds = diffTimeSeconds - hours * 3600 - minutes * 60;
                let hoursStr = ('00' + hours).substr(-2); // 對字符串進行補0操作
                let minutesStr = ('00' + minutes).substr(-2);
                let secondsStr = ('00' + seconds).substr(-2);
                let timeStr = hoursStr + ':' + minutesStr + ':' + secondsStr;
                countDownBox.innerText = '倒計時：' + timeStr;
                setTimeout(countDown, 1000); // 每秒更新一次倒計時
            }
        }

        countDown();
    

使用 setTimeout() 方法可以實現倒計時的功能，適用於需要倒計時的場景，例如：京東618、雙11秒殺活動等。

五、使用第三方時間庫 luxon.js 管理時間

luxon.js 是一個增強版的 JS 時間庫，它可以方便地進行時間的管理和操作。相對於原生 JS 時間方法，它支持多種時間格式和時區，可以實現非常精細的時間處理。

    
        let now = luxon.DateTime.now(); // 獲取當前時間
        let year = now.year; // 獲取當前年份
        let month = now.month; // 獲取當前月份
        let day = now.day; // 獲取當前日期
        let hour = now.hour; // 獲取當前小時數
        let minute = now.minute; // 獲取當前分鐘數
        let second = now.second; // 獲取當前秒數
        let millisecond = now.millisecond; // 獲取當前毫秒數
    

使用 luxon.js 庫，可以進行非常精細的時間處理，包括：時區處理、格式化、持續時間計算等。適用於需要進行複雜時間處理的場景，例如：航班預定、旅行計劃等。