前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >JavaScript|日期对象

JavaScript|日期对象

作者头像
算法与编程之美
发布于 2020-09-16 03:19:53
发布于 2020-09-16 03:19:53
95100
代码可运行
举报
运行总次数:0
代码可运行

在JavaScript中没有日期类型的数据,但我们在开发的过程中经常需要处理日期,所以在这里我将在这里给展示大家如何用日期对象(Date)来操作日期和时间。

创建日期对象

在JavaScript中,创建日期对象必须使用new语句。使用关键字new新建日期对象时有以下四种方法;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
方法一:日期对象 = new Date()

方法二:日期对象 = new Date(日期字串)

方法三:日期对象 = new Date(毫秒)

方法四:日期对象 = new Date(年,月,日[时,分,秒,[毫秒])

接下来我们用上述四种方式来创建日期对象。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>

<html>

       <head>

              <meta  charset="UTF-8">

              <title>日期对象</title>

              <script>

                     //以当前时间创建一个日期对象

                     var  myDate1 = new Date();

                     //将字符串转化成日期对象,该对象代表的日期为2020年3月8日

                     var  myDate2 = new Date("March 8,2020");

                     //将字符串转化成日期对象,该对象代表的日期为2020年3月8日

                     var  myDate3 = new Date("2020/3/8");

                     //创建一个日期对象,该对象代表的日期和时间为2020年3月8日10时38分46秒

                     var  myDate4 = new Date(2020,3,8,10,38,46);

                     //创建一个日期对象,该对象代表距离2020年1月1日0时0分0秒10000毫秒的时间

                     var  myDate5 = new Date(10000);

                     //分别输出以上日期对象的本地格式

                     document.write("myDate1  所代表的时间为:"+myDate1.toLocaleString()+"<br>");

                     document.write("myDate2  所代表的时间为:"+myDate2.toLocaleString()+"<br>");

                     document.write("myDate3  所代表的时间为:"+myDate3.toLocaleString()+"<br>");

                     document.write("myDate4  所代表的时间为:"+myDate4.toLocaleString()+"<br>");

                     document.write("myDate5  所代表的时间为:"+myDate5.toLocaleString()+"<br>");

              </script>

       </head>

<body>

        </body>

</html>

效果:

图1.1创建日期对象

日期对象常用方法的应用

日期对象的方法主要分为三大组:setXxx、getXxx和toXxx。setXxx方法用于设置时间和日期值;getXxx方法用于获取时间和日期;toXxx方法主要是将日期转化成指定格式。

日期对象的常用方法如下表:

图2.1日期对象常用方法的应用

接下来我们就来尝试一下以YYY-MM-DD AM H:M:S 学期X的格式显示日期:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>

<html>

       <head>

              <meta  charset="UTF-8">

              <title>日期对象</title>

              <script  type="text/javascript">

                     var  now = new Date(); //定义日期对象

                     //输出自定义的日期格式

                     document.write("今天是:" + now.toLocaleFormat("%Y-%m-%d %a %H:%M;%S %a"));

              </script>

       </head>

       <body>

       </body>

</html>

效果:

图2.2自定义日期格式

在这里我们用到了toLocaleFormat()方法;

它是JavaScript1.6新增加的功能,IE、Opera等浏览器都不支持。

日期间的运算

日期数据之间的运算通常包括一个日期对象加上整数年、月、日,以及两个日期对象进行相减运算。

1 日期对象与整数年、月、日相加

日期对象与整数年、月、日相加,需要将它们相加的结果,通过setXxx函数设置成新的日期对象,实现日期对象与整数年、月、日相加,语法格式如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
date.setData(date.getData()+value) //增加天

date.setMonth(date.getMonth()+value) //增加月

date.setFullYear(date.getFullYear()+value)  //增加年

2 日期相减

JavaScript允许两个日期对象的相减,相减之后返回的是这两个日期之间的毫秒数。通常我们会将毫秒转化成秒、分、小时、天等。接下来来举例说明一下。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>

<html>

       <head>

              <meta  charset="UTF-8">

              <title>日期对象</title>

              <script>

                     var  now = new Date(); //定义日期对象

                     var  nationalDay = new Date(2021,1,1,0,0,0); //2021年元旦定义日期对象

                     var  msel = nationalDay-now;//相差的毫秒数

                     //输出相差时间

                     document.write("距离2021年元旦还有:"+msel+"毫秒<br>");

                     document.write("距离2021年元旦还有:"+parseInt(msel/1000)+"秒<br>");

                     document.write("距离2021年元旦还有:"+parseInt(msel/(1000*60))+"分钟<br>");

                     document.write("距离2021年元旦还有:"+parseInt(msel/(1000*60*60))+"分钟<br>");  

                     document.write("距离2021年元旦还有:"+parseInt(msel/(1000*60*60*24))+"天<br");

              </script>

       </head>

       <body>

       </body>

</html>

效果:

图3.2日期相减

总结

日期是我们在生活中很重要的东西,在做网页或者是其它东西的时候也都少不了日期的,运用JavaScript的日期对象可以做很多事情,比如算算期末考试还有好久,把日期变成自己想要的格式等。对于JavaScript的日期对象和它的一些常用方法要熟练的掌握,才能更好的完成自己的作品和项目。

END

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-09-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript对象
5日期对象:var Udate = new Date(); 返回/设置年份方法:      get/setFullYear() var mydate=new Date();//当前时间2014年3月
用户1624346
2018/04/10
1.2K0
JavaScript对象
JavaWeb——JavaScript精讲之ECMAScript标准(基本语法、JavaScript对象)
JavaScript不同于HTML、CSS,其是一种客户端脚本语言,运行在客户端浏览器中,每一个浏览器都有JavaScript的解析引擎。其是脚本语言,不需要编译,直接可以被浏览器解析执行。
Winter_world
2020/09/25
9340
JavaWeb——JavaScript精讲之ECMAScript标准(基本语法、JavaScript对象)
JavaScript详细解析
我们之前的操作都是基于原生 JavaScript 的,比较繁琐。 JQuery 是一个前端框架技术,针对 JavaScript 进行了一系列的封装,使得操作变得非常简单! 期待吧……
全栈程序员站长
2022/09/09
1.5K0
javascript入门
入门程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>JS入门——helloworld</title> <!-- JavaScript[JS]代码,包含在一对script标签中 script标签可以出现在网页中的任何一个位置 --> <scr
周小董
2019/03/25
8600
一文入门JavaScript
功能: 可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。
共饮一杯无
2022/11/28
1.4K0
一文入门JavaScript
2022年11月21日13:32:00——T5——JS对象与Date日期函数
其中:dateObject 所指的月份中的某一天,使用本地时间。返回值是 1 ~ 31 之间的一个整数。
红目香薰
2022/11/28
6820
2022年11月21日13:32:00——T5——JS对象与Date日期函数
一篇文章带你了解JavaScript日期
JavaScript 日期从1970年1月1日00:00:00开始计算的毫秒数。一天包含86,400,000毫秒。
前端进阶者
2021/01/22
6060
好多Javascript日期选择器呀–1
<script language=javascript> var DS_x,DS_y;
Java架构师必看
2021/03/22
8780
我们一起学JavaScript之面向对象
​ 在 Java 中我们学习过面向对象,核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。
楠羽
2022/11/18
3570
我们一起学JavaScript之面向对象
事半功倍系列 javascript
清华大学出版的《事半功倍系列javascript》,本人照着书敲出来的,有些翻译了一下.前几年看了JavaScript
Java架构师必看
2020/07/21
3760
JavaScript(11)
在JavaScript中,创建日期对象必须使用“new语句”。使用关键字new新建日期对象时,常用的有2种:
Qwe7
2022/04/06
2560
时间对象-JS基础
一、初见日期对象 1.创建一个日期对象 var 日期对象名 = new Date(); var:用来声明一个变量。 new:创建一个日期对象,必须使用new关键字。 Date():调用构造函数。 2.Date对象的方法 Date对象的方法很多,但主要分为两大类: getXxx(): 用于获取时间。 setXxx(): 用于设置时间。 (1)获取时间 方法 说明 getFullYear() 获取年份,返回值为 4 位数字。 getMonth() 获取月份,返回值为 0(一月)到11(十二月)之
见贤思齊
2020/12/02
7.4K0
时间对象-JS基础
javascript入门笔记6-内置对象
1.Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒)。
方志朋
2022/11/30
3030
javascript入门笔记6-内置对象
前端基础-JavaScript(一)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
cwl_java
2019/12/10
8710
JAVA保姆式上手教程之JAVAWEB day01-js基础
用户9184480
2024/12/13
460
JavaScript学习总结(三)
在学习完了基本的内容之后,我们来学习一下JavaScript中的对象部分以及如何自定义对象的问题。
roobtyan
2019/02/21
6160
JavaScript对象编程-第3章
时间:UTC全球标准时间,也被称为格林威治标准时间,UTC+800指比格林威治标准时间提前8个小时,也是北京时间。
达达前端
2019/07/03
3110
JavaScript对象编程-第3章
JavaScript
ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。
GhostCN_Z
2020/04/03
1.3K0
JavaScript 入门(上)
[HTML入门与进阶以及HTML5] [CSS] [JS-上] [JS-下] [jQuery] [Node.js + Gulp 知识点汇总] [MongoDB + Express 入门及案例代码] [Vue项目开发-仿蘑菇街电商APP]
Twcat_tree
2022/12/05
6070
JavaScript 入门(上)
JS-Date对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Date对象</title> <style type="text/css"> div{ display: inline-block; padding: 10px; margin: 5px; border: 4px solid #4169E1; } </style> <script type="text/javascript"> v
xing.org1^
2018/05/17
3.9K0
相关推荐
JavaScript对象
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文