一篇文章带你了解JavaScript日期

Karen110
• 阅读 818

日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。

一、JavaScript的日期格式

一个JavaScript日期可以写为一个字符串:

Thu Feb 02 2019 09:59:51 GMT+0800 (中国标准时间)

或者是一个数字:

1486000791164

写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。

1. 显示日期

使用脚本来将日期显示在一个id="demo"的<p>元素中:


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>项目</title>
    </head>

    <body style="background-color: aquamarine;">

        <p id="demo"></p>

        <script>
            document.getElementById("demo").innerHTML = Date();
</script>

    </body>

</html>

一篇文章带你了解JavaScript日期

在下面的教程中,你将学到更多显示日期的方法,用一种可读的格式。


2. 创建日期对象

日期对象让我们使用日期。

日期包括年、月、日、小时、分钟、秒和毫秒。

可以使用 new Date()构造函数创建日期对象。

有4种初始化日期的方法:

语法:


new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
使用 new Date(), 使用当前日期和时间创建新的日期对象:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
</head>
<body>

  <p id="demo"></p>

  <script>
    var d = new Date();
    document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

一篇文章带你了解JavaScript日期

使用 new Date(date string), 从指定的日期和时间创建新的日期对象:
<script>
var d = new Date("October 13, 2014 11:13:00");
document.getElementById("demo").innerHTML = d;
</script>

一篇文章带你了解JavaScript日期

有效日期字符串(日期格式)

使用 new Date(number), 创建一个新的日期对象为零时间加上数字。

零时间 是1970年1月1日00:00:00 UTC,数字以毫秒为单位指定:


<script>
var d = new Date(86400000);
document.getElementById("demo").innerHTML = d;
</script>

一篇文章带你了解JavaScript日期代码解析:

JavaScript 日期从1970年1月1日00:00:00开始计算的毫秒数。一天包含86,400,000毫秒。

使用 new Date(7 numbers), 创建具有指定日期和时间的新日期对象:

7 numbers 指定年、月、日、小时、分钟、秒和毫秒, 按照顺序排列:


<script>
var d = new Date(99, 5, 24, 11, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

一篇文章带你了解JavaScript日期

上面例子的变种让我们忽略了最后4个参数中的任意一个:


<script>
var d = new Date(99, 5, 24);
document.getElementById("demo").innerHTML = d;
</script>

一篇文章带你了解JavaScript日期

JavaScript 计数月是从0到11。一月是0。十二月是11。

二、日期的方法

当创建日期对象时,许多方法允许你在它上面操作。

日期的方法允许你获取和设置对象的年,月,日,小时,分钟,秒,毫秒,可以使用本地时间UTC(通用,或GMT)时间。


1. 显示日期

toString()方法

当你在HTML中显示一个日期对象,它会用tostring()方法,自动转换成一个字符串.


<p id="demo"></p>

<script>
d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
和下面的相同
<p id="demo"></p>

<script>
d = new Date();
document.getElementById("demo").innerHTML = d.toString();
</script>

一篇文章带你了解JavaScript日期

toUTCString()方法

toUTCString() 方法转换日期为UTC字符串 (一个日期显示标准).

<script>
d = new Date();
document.getElementById("demo").innerHTML = d.toString();
</script>

一篇文章带你了解JavaScript日期

toDateString() 方法

toDateString() 方法将日期转换为更可读的格式:

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>

一篇文章带你了解JavaScript日期

日期对象是静态的。计算机时间正在滴答作响,但日期对象,一旦创建,将不会变化。

三、总结

本文主要介绍了JavaScript基础中日期的使用,通过从最基础入手,一步步的扩展,用丰富的案例帮助大家更好理解。

希望大家可以根据文章的内容,积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

代码很简单,能够方便大家更好理解,希望对大家的学习有帮助。

**-----**------**-----**---**** End **-----**--------**-----**-****

一篇文章带你了解JavaScript日期

往期精彩文章推荐:

一篇文章带你了解JavaScript日期

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】:https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
2个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
光头强的博客 光头强的博客
2个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
2个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
2个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
Stella981 Stella981
1年前
JS 苹果手机日期显示NaN问题
问题描述newDate("2019122910:30:00")在IOS下显示为NaN原因分析带的日期IOS下存在兼容问题解决方法字符串替换letdateStr"2019122910:30:00";datedateStr.repl
Wesley13 Wesley13
1年前
java常用类(2)
三、时间处理相关类Date类:计算机世界把1970年1月1号定为基准时间,每个度量单位是毫秒(1秒的千分之一),用long类型的变量表示时间。Date分配Date对象并初始化对象,以表示自从标准基准时间(称为“历元”(epoch),即1970年1月1日08:00:00GMT)以来的指定毫秒数。示例:packagecn.tanjian
Wesley13 Wesley13
1年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
1年前
PHP中的NOW()函数
是否有一个PHP函数以与MySQL函数NOW()相同的格式返回日期和时间?我知道如何使用date()做到这一点,但是我问是否有一个仅用于此的函数。例如,返回:2009120100:00:001楼使用此功能:functiongetDatetimeNow(){
helloworld_34035044 helloworld_34035044
5个月前
皕杰报表(关于日期时间时分秒显示不出来)
在使用皕杰报表设计器时,数据据里面是日期型,但当你web预览时候,发现有日期时间类型的数据时分秒显示不出来,只有年月日能显示出来,时分秒显示为0:00:00。1.可以使用tochar解决,数据集用selecttochar(flowdate,"yyyyMMddHH:mm:ss")fromtablename2.也可以把数据库日期类型date改成timestamp