JavaScript中时间日期函数new Date()详解(5种获取时间戳的函数)

 更新时间:2024年04月29日 11:30:56   作者:北城笑笑  
这篇文章主要给大家介绍了关于JavaScript中时间日期函数new Date()的相关资料,主要讲的是JS中5种获取时间戳的函数,new Date()是JavaScript中用于获取当前日期和时间的内置函数,需要的朋友可以参考下

简介:

JavaScript 中的 new Date() 方法用于创建一个新的 Date 对象,该对象表示当前日期和时间。Date 对象提供了许多方法和属性,可以用于获取和设置日期和时间信息。

new Date([year, month, day, hour, minute, second, millisecond])

其中,每个参数都是可选的。如果没有指定参数,则 new Date() 方法将创建一个表示当前日期和时间的 Date 对象。 

一、关于new Date()函数;

    首先创建一个表示当前时间的 Date 对象
    var nowTime = new Date();

    console.log(nowTime);
    控制台输出 Fri Nov 17 2023 10:41:58 GMT+0800 (中国标准时间)


    //获取 Date 当前时间 年月日时分秒
    console.log(nowTime.toLocaleString());
    //控制台输出 2023/11/17 10:41:58

    //获取 Date 当前时间 年月日
    console.log(nowTime.toLocaleDateString());
    //控制台输出 2023/11/17

    //获取 Date 当前时间 时分秒
    console.log(nowTime.toLocaleTimeString());
    //控制台输出 10:41:58

    //获取 Date 对象的年份
    console.log(nowTime.getFullYear());
    //控制台输出 2023

    //获取 Date 对象的月份(注意月份从0开始,所以使用时需要加1)
    console.log(nowTime.getMonth());
    //控制台输出 11

    //获取 Date 对象的日期
    console.log(nowTime.getDate());
    //控制台输出 17

    //获取 Date 对象的小时
    console.log(nowTime.getHours());
    //控制台输出 10

    //获取 Date 对象的分钟
    console.log(nowTime.getMinutes());
    //控制台输出 41

    //获取 Date 对象的秒
    console.log(nowTime.getSeconds());
    //控制台输出 58

    //获取 Date 对象的毫秒
    console.log(nowTime.getMilliseconds());
    //控制台输出 917

二、获取 Date 对象时间戳的五种方式;

    1、new Date().getTime()方法
    const timestamp1 = new Date().getTime();
    console.log(timestamp1);
    //控制台输出 1700189060045

    2、Date.now()方法
    const timestamp2 = Date.now();
    console.log(timestamp2);
    //控制台输出 1700189060045

    3、Date.parse(new Date())方法
    const timestamp3 = Date.parse(new Date());
    console.log(timestamp3);
    //控制台输出 1700189060045

    4、new Date()).valueOf()方法
    const timestamp4 = new Date().valueOf();
    console.log(timestamp4);
    //控制台输出 1700189060045

    5、Number(new Date())方法
    const timestamp5 = Number(new Date());
    console.log(timestamp5);
    //控制台输出 1700189060045

三、Date 对象应用实例

实例1:计算月份差

有时候,我们需要知道两个日期之间相差多少天。
可以先将日期转换为毫秒数,然后相减并除以一天的毫秒数(1000 * 60 * 60 * 24)来得到结果。

function daysBetween(date1, date2) {
  let oneDay = 1000 * 60 * 60 * 24;
  return Math.round((date2 - date1) / oneDay);
}

let start = new Date('June 20, 2022');
let end = new Date('July 20, 2022');

console.log(daysBetween(start, end)); // 输出 "30"

实例2:计算两个日期之间的时间差

const startDate = new Date('2021-01-01');
const endDate = new Date('2021-12-31');

const timeDiff = endDate - startDate;

// 计算两个日期之间的天数
const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

// 计算两个日期之间的小时数
const hoursDiff = Math.floor(timeDiff / (1000 * 60 * 60));

// 计算两个日期之间的分钟数
const minutesDiff = Math.floor(timeDiff / (1000 * 60));

// 计算两个日期之间的秒数
const secondsDiff = Math.floor(timeDiff / 1000);

、、与实例1大同小异、、、、

实例3:设置特定日期和时间:

const date = new Date();

// 设置日期为 2022 年 1 月 1 日
date.setFullYear(2022);
date.setMonth(0);
date.setDate(1);

// 设置时间为 0 时 0 分 0 秒
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);

// 获取设置后的日期和时间
const formattedDate1 = date.toDateString();
const formattedTime2 = date.toTimeString();

实例4:获取日期元素

在很多场景下,我们需要单独获取日期的年、月、日等元素。
我们可以使用getFullYear()、getMonth()、getDate()等方法来实现这一点。

let now = new Date();
let year = now.getFullYear(); // 获取四位数年份
let month = now.getMonth(); // 注意月份是从0开始计数的,所以需要加1
let day = now.getDate();

console.log(`${year}/${month + 1}/${day}`); // 输出类似 "2022/6/20"

实例5:格式化日期

为了美观或适应用户偏好,我们通常需要将日期格式化成特定的字符串。
这里我们使用模板字面量和padStart()方法来实现:

function formatDate(date) {
  let year = date.getFullYear();
  let month = `0${date.getMonth() + 1}`.slice(-2);
  let day = `0${date.getDate()}`.slice(-2);

  return `${year}-${month}-${day}`;
}

let today = new Date();
console.log(formatDate(today)); // 输出类似 "2022-06-20"

附:日常方法

入参日期的 时间戳
new Date("2022-08-21 11:12:13").getTime() 		// 1661051533000

入参日期的 星期(注:日:0 ,一:1,二:2,三:3,四:4,五:5,六:6)
new Date("2022-08-21 11:12:13").getDay()        // 0

入参日期的 年
new Date("2022-08-21 11:12:13").getFullYear()  	// 2022

入参日期的 月 -1 
new Date("2022-08-21 11:12:13").getMonth()  	// 7

入参日期的 日
new Date("2022-08-21 11:12:13").getDate() 		// 21

入参日期的 时
new Date("2022-08-21 11:12:13").getHours() 		// 11

入参日期的 分
new Date("2022-08-21 11:12:13").getMinutes()  	// 12

入参日期的 秒
new Date("2022-08-21 11:12:13").getSeconds() 	// 13

入参日期的 毫秒 (注:最大为999)
new Date("2022-08-21 11:12:13:999").getMilliseconds()  //999

总结 

到此这篇关于JavaScript中时间日期函数new Date()的文章就介绍到这了,更多相关JS时间日期函数new Date()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现单层数组转多层树

    js实现单层数组转多层树

    这篇文章主要介绍了js实现单层数组转多层树方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 关于JavaScript 数组你应该知道的事情(推荐)

    关于JavaScript 数组你应该知道的事情(推荐)

    这篇文章主要介绍了JavaScript 数组,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • javascript中的 object 和 function小结

    javascript中的 object 和 function小结

    JavaScript的面向对象是基于原形的,所有对象都有一条属于自己的原型链。Object与Function可能很多看Object instanceof Function , Function instanceof Object都为true而迷惑,所以首先看下对象的实例。
    2016-08-08
  • JavaScript自定义Webpack配置实现流程介绍

    JavaScript自定义Webpack配置实现流程介绍

    本系列主要整理前端面试中需要掌握的知识点。本节介绍webpack如何优化前端性能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-10-10
  • 前端实现json动画详细过程(附带示例)

    前端实现json动画详细过程(附带示例)

    这篇文章主要介绍了如何使用Lottie制作动画,包括创建动画文件.json、实现效果、在Git仓库中保存和共享、运行动画以及在动画天堂下载和显示JSON动画,文中通过代码及图文介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • 第十章之巨幕页头缩略图与警告框组件

    第十章之巨幕页头缩略图与警告框组件

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。本文给大家介绍BootStrap组件第十章之巨幕页头缩略图和警告框组件 的相关资料,需要的朋友可以参考下
    2016-04-04
  • JavaScript与ActionScript3两者的同性与差异性

    JavaScript与ActionScript3两者的同性与差异性

    接触JavaScript和ActionScript3也有近5年的时间了,它们都是应用比较广泛的脚本语言.接下来通过本文给大家介绍JavaScript与ActionScript3两者的同性与差异性,感兴趣的朋友一起学习吧
    2016-09-09
  • js中cookie的使用详细分析

    js中cookie的使用详细分析

    JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求。 cookie是浏览器 提供的一种机制,它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制,而并不是JavaScript本身的性质。
    2008-05-05
  • js中删除数组中的某一元素实例(无下标时)

    js中删除数组中的某一元素实例(无下标时)

    下面小编就为大家带来一篇js中删除数组中的某一元素实例(无下标时)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 深入浅析JavaScript中的作用域和上下文

    深入浅析JavaScript中的作用域和上下文

    javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性。本文给大家介绍JavaScript中的作用域和上下文,感兴趣的朋友一起学习
    2016-03-03

最新评论