在 javascript 中内置了一个 Date 对象,可用于实现一些日期和时间的操作。

本文整理 js 日期对象的详细功能,使用 js 日期对象获取具体日期、昨天、今天、明天、每月天数、时间戳等,以及常用的日期时间处理方法。

在前端可以通过new Date()生成Date对象,如果没有传参数时,即获取本地当前日期和时间。不过这时候显示的内容并不是我们常见的日期格式,而是一个当前时区时间的描述文本,以下代码显示的效果如图所示:

  1.  
  2.   const date = new Date();
  3.   console.log(date);

如果希望显示的内容格式化为常见的日期格式,最简单的办法是调用 toLocaleString() 方法,如下所示:

  1. const date = new Date();
  2. console.log(date.toLocaleString());

new Date()可接受三种类型的参数

第一种是只传入一个number类型的参数,一般是时间戳的毫秒数,返回参数数字所处的时间,如下所示:

  1. const date = new Date(946684800000);
  2. console.log(date.toLocaleString());

第二种也只传入一个参数,参数类型是string,不过需要是正确的格式,如 "2010-10-10 10:10:10",返回对应的时间:

  1. const date = new Date("2010-10-10 10:10:10");
  2. console.log(date.toLocaleString());
第三种是可以传入多个参数,总共可传7个 number 类型的参数,分别是年,月(0~11),日,小时,分钟,秒钟,毫秒。这种方式的每一个参数值没有规定范围,Date对象会自动帮我们算出对应的时间。 比如我们传入的月是12,那么生成的日期会自动修正为第二年的1月。如下所示:
  1. const date = new Date(2022,12,1,10,10,10,999);
  2. console.log(date.toLocaleString());
 
Date对象还提供了很多方法,根据需要实现的功能,在下面列出一些常用的方法。
一、获取时间戳
时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起到现在的总毫秒数。获取时间戳的方法挺多,常见的有如下几种:
最常用的 getTime 方法
  1. const date = new Date();
  2. console.log(date.getTime());
还有一种 Date.now() 方法,这是ECMAScript 5.1版本给Date对象增加的静态方法。Date.now的速度比getTime快一倍以上,应该是获取时间戳最快的方法。
  1. console.log(Date.now());
valueOf方法是返回对象的原始值,在Date对象上也是返回时间戳,一般很少有人使用这个方法获取时间戳
  1. const date = new Date();
  2. console.log(date.valueOf());
最简单粗暴的方法,是直接把创建的Date对象转换为数字,+new Date(),不过性能更差一点
  1. const date = new Date();
  2. console.log(+date);

二、获取常用时间数据

Date对象可以分别获取到本地年、月、日、小时、分钟、秒钟、毫秒等数据,方法如下:
    date.getFullYear():获取年
    date.getMonth():获取月
    date.getDate():获取日
    date.getDay():获取一周的某一天(0~6)
    date.getHours():获取小时
    date.getMinutes():获取分钟
    date.getSeconds():获取秒
    date.getMilliseconds():获取毫秒
使用这些方法,可以灵活的显示日期时间格式,以下是一个格式化当前日期时间的函数:
  1. function formatDate(){
  2. // 创建日期对象
  3. const date = new Date();
  4. // 获取各日期/时间数据
  5. let year = date.getFullYear();
  6. let month = date.getMonth();
  7. let DD = date.getDate();
  8. let hour = date.getHours();
  9. let minute = date.getMinutes();
  10. let second = date.getSeconds();
  11. let day = date.getDay();
  12. // 拼接日期时间为字符串
  13. let time = year + '年' + month + '月' + DD + '日 ' + hour + ':' + minute + ':' + second + ' 星期' + ['日','一','二','三','四','五','六',][day];
  14. return time
  15. }
  16. console.log(formatDate())

三、设置日期时间

除了在创建Date对象时,通过参数获取到对应时间的Date对象,也可以设置Date对象的时间。
    date.setFullYear():设置年,setFullYear()可以传3个参数,其中第2个和第3个是可选的,分别是要设置的年,月,日;
    date.setFullYear():设置月,预期值是 0~11,-1 将设置为上一年的最后一个月、12 将设置为明年的第一个月。setMonth()可以传2个参数,其中第2个是可选的,分别是要设置的月,日;
    date.setDate():设置日,预期值是 1~31;0 会设置为上个月的最后一天、-1 将设置为上个月的最后一天的前一天、如果一个月有 31 天:32 将导致下个月的第一天;
    date.setHours():设置小时(0~23),setHours()可以传4个参数,其中第2、3、4个是可选的,分别是要设置的时,分,秒,毫秒;
    date.setMinutes():设置分钟(0~59),setMinutes()可以传3个参数,其中第2个和第3个是可选的,分别是要设置的分,秒,毫秒
    date.setSeconds():设置秒(0~59),setSeconds()可以传2个参数,其中第2个是可选的,分别是要设置的秒,毫秒
    date.setMilliseconds():设置毫秒(0~59)
使用设置日期方法,可以实现一些获取指定日期时间的功能。
 
如果要获取2020年的当前时间,就可以使用 setFullYear() 方法轻松实现,如下所示:
  1. const date = new Date();
  2. date.setFullYear(2020)
  3. console.log(date.toLocaleString());
又如获取今年二月的最后一天(即当月的天数):
  1. const date = new Date();
  2. date.setMonth(2,0);
  3. console.log(date.getDate());
再或者获取昨天和明天的日期:
  1. const date = new Date();
  2. date.setDate(date.getDate() + 1);
  3. console.log('明天是',date.toLocaleString());
  4. date.setDate(date.getDate() - 2);
  5. console.log('昨天是',date.toLocaleString());
在实际工作中,会经常需要获取到特定的日期。可以封装一个函数,用于获取当前日期的前n天或后n天
  1. function getSpecificDate(day){
  2. //计算出要加/减的毫秒数
  3. var num = 1000*60*60*24*day;
  4. var newDate = new Date(Date.now()+num);
  5. return newDate;
  6. }
  7.  
  8. console.log('明天是',getSpecificDate(1).toLocaleString());
  9. console.log('后天是',getSpecificDate(2).toLocaleString());
  10. console.log('昨天是',getSpecificDate(-1).toLocaleString());

还有一种很方便的,给Date的原型方法中加入format方法,这样在Date对象上可以直接使用format方法格式化所需要的日期。如下所示:

  1. Date.prototype.format = function(format){
  2. var o = {
  3. "M+" : this.getMonth()+1, //month
  4. "d+" : this.getDate(), //day
  5. "h+" : this.getHours(), //hour
  6. "m+" : this.getMinutes(), //minute
  7. "s+" : this.getSeconds(), //second
  8. "q+" : Math.floor((this.getMonth()+3)/3), //quarter
  9. "S" : this.getMilliseconds() //millisecond
  10. };
  11. if(/(y+)/.test(format)){
  12. format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  13. }
  14. for(var k in o) {
  15. if(new RegExp("("+ k +")").test(format)){
  16. format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
  17. }
  18. }
  19. return format;
  20. };
  21. console.log(new Date().format('yyyy-MM-dd hh:mm:ss'))
注: 在国内一般的项目都只需要获取本地时间就足够了,如果涉及到国外的项目,就可能需要获取世界标准时间。获取世界标准时间的方法就是在获取本地时间的方法中加上UTC,如 getUTCDate

整理 js 日期对象的详细功能,使用 js 日期对象获取具体日期、昨天、今天、明天、每月天数、时间戳等,以及常用的日期时间处理方法的更多相关文章

  1. PHP获取今天、昨天、明天的日期

    <?php echo "今天:".date("Y-m-d")."<br>"; echo "昨天:".d ...

  2. (转)PHP获取今天、昨天、明天的日期

    <?php echo "今天:".date("Y-m-d")."<br>"; echo "昨天:".d ...

  3. JS实现返回对象的详细信息

    使用JS有时会需要打印出对象的详细信息,下面方法可以实现: function ShowObjProperty(Obj) { var PropertyList=''; var PropertyCount ...

  4. 完整原型链详细图解之JS构造函数、原型 原型链、实例化对象

    一.首先说一下什么是构造函数: 构造函数:用来在创建对象时初始化对象.特点:构造函数名一般为大写字母开头:与new运算符一起使用来实例化对象. 举例: function Person(){} //Pe ...

  5. DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为(转)

    一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢 ...

  6. 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

  7. 简单封装分页功能pageView.js

    分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...

  8. 【转】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  9. 【原】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  10. ES6,ES2105核心功能一览,js新特性详解

    ES6,ES2105核心功能一览,js新特性详解 过去几年 JavaScript 发生了很大的变化.ES6(ECMAScript 6.ES2105)是 JavaScript 语言的新标准,2015 年 ...

随机推荐

  1. Logstash:使用ELK堆栈进行API分析

  2. 第二章:视图层 - 10:动态生成PDF文件

    可以通过开源的Python PDF库ReportLab来实现PDF文件的动态生成. 一.安装ReportLab ReportLab库在PyPI上提供,可以使用pip来安装: $ pip install ...

  3. 回滚Deployment控制器下的应⽤发布

    若因各种原因导致滚动更新⽆法正常进⾏,如镜像⽂件获取失败."⾦丝雀"遇险等,则应该将应⽤回滚到之前的版本,或者回滚到由⽤户指定的历史记录中的版本. Deployment控制器的回滚 ...

  4. Ceph分布式存储详述

    存储发展史 企业中使用存储按照其功能,使用场景,一直在持续发展和迭代,大体上可以分为四个阶段: DAS:Direct Attached Storage,即直连存储,第一代存储系统,通过SCSI总线扩展 ...

  5. 4.maven私服nexus2迁移到nexus3

    注意,本文讲解的是针对我们原来所用的nexus2.14.5版本的升级配置流程,如果您的老私服版本并不是这个,那么请先参考这里:升级兼容性 – Repository Manager 2到3.选定对应可升 ...

  6. cAdvisor容器监控规则

    其他说明参考host主机监控规则:https://www.cnblogs.com/sanduzxcvbnm/p/13589848.html 在prometheus主程序目录下的rules目录下新建do ...

  7. 堆Pwn:House Of Storm利用手法

    0x00:介绍 利用手法的背景: house of storm是一种结合了unsorted bin attack和Largebin attack的攻击技术,其基本原理和Largebin attack类 ...

  8. 痞子衡嵌入式:一个关于Segger J-Flash在Micron Flash固定区域下载校验失败的故事(SR寄存器BP[x:0]位)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是一个关于Segger J-Flash在Micron Flash固定区域下载校验失败的故事. 痞子衡最近在支持一个 i.MXRT1170 欧 ...

  9. ASP.NET Core 中的模型绑定

    微软官方文档:ASP.NET Core 中的模型绑定 Route 是通过MVC Route URL取值. 如:http://localhost:5000/Home/Index/2,id取出的值就会是2 ...

  10. PHP cURL抓取网上图片

    cURL的底层是由一个命令行工具实现的,用于获取远程文件或传输文件,更多的情况是用来模拟get/post表单提交.也可以用户文件上传,爬取文件,支持FTP/FTPS,HTTP/HTTPS等协议,通俗来 ...