您的位置:

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

详解 JS 取当前时间

2023-05-24
重学java笔记,java笔记总结

2022-11-23
java学习笔记(java初学笔记)

2022-11-14
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
JS当前时间戳的阐述

2023-05-24
java方法整理笔记(java总结)

2022-11-08
印象笔记记录java学习(Java成长笔记)

2022-11-12
java基础知识学习笔记一,Java基础笔记

2022-11-21
python基础学习整理笔记,Python课堂笔记

2022-11-21
java笔记,大学java笔记

2022-11-28
达内web前端js笔记(达内jsd)

本文目录一览: 1、web前端里的js技术 2、《web前端笔记7》js字符—获取、查找、遍历、提取、替换方法总结 3、达内web前端开发讲的什么内容 4、2020年自学Web前端要掌握的知识点有哪些

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
java笔记,尚硅谷java笔记

2022-12-01
javascript简要笔记,JavaScript读书笔记

2022-11-17
发篇java复习笔记(java课程笔记)

2022-11-09
java客户端学习笔记(java开发笔记)

2022-11-14
当前时间戳

2023-05-11
js一行代码获取下个月时间(js获取当前第几周)

本文目录一览: 1、用js代码编写下个月一号为星期几 2、js获取当前时间以及未来一星期(或者可以规定天数)的时间 3、js 怎么取到时间戳里面的月份? 4、用js如何获得下个月一共多少天呢 5、js

2023-12-08
我的python笔记06(Python)

2022-11-14
java包笔记,Java语言包

2022-11-18