详解 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 库，可以进行非常精细的时间处理，包括：时区处理、格式化、持续时间计算等。适用于需要进行复杂时间处理的场景，例如：航班预定、旅行计划等。