一篇文章带你了解JavaScript日期

开发 前端
本文主要介绍了JavaScript基础中日期的使用,通过从最基础入手,一步步的扩展,用丰富的案例帮助大家更好理解。代码很简单,能够方便大家更好理解,希望对大家的学习有帮助。

[[407097]]

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

一、JavaScript的日期格式

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

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

或者是一个数字:

  1. 1486000791164 

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

1. 显示日期

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

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3.  
  4.     <head> 
  5.         <meta charset="UTF-8"
  6.         <title>项目</title> 
  7.     </head> 
  8.  
  9.     <body style="background-color: aquamarine;"
  10.  
  11.         <p id="demo"></p> 
  12.  
  13.         <script> 
  14.             document.getElementById("demo").innerHTML = Date(); 
  15. </script> 
  16.  
  17.     </body> 
  18.  
  19. </html> 

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

2. 创建日期对象

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

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

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

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

语法:

  1. new Date() 
  2. new Date(milliseconds) 
  3. new Date(dateString) 
  4. new Date(yearmonthday, hours, minutes, seconds, milliseconds) 

使用 new Date(), 使用当前日期和时间创建新的日期对象: 

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.   <meta charset="UTF-8"
  5.   <title>项目</title> 
  6. </head> 
  7. <body> 
  8.  
  9.   <p id="demo"></p> 
  10.  
  11.   <script> 
  12.     var d = new Date(); 
  13.     document.getElementById("demo").innerHTML = d; 
  14. </script> 
  15.  
  16. </body> 
  17. </html> 

使用 new Date(date string), 从指定的日期和时间创建新的日期对象:

  1. <script> 
  2. var d = new Date("October 13, 2014 11:13:00"); 
  3. document.getElementById("demo").innerHTML = d; 
  4. </script> 

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

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

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

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

代码解析:

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

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

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

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

 

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

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

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

二、日期的方法

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

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

1. 显示日期

toString()方法

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

  1. <p id="demo"></p> 
  2.  
  3. <script> 
  4. d = new Date(); 
  5. document.getElementById("demo").innerHTML = d; 
  6. </script> 
  7. 和下面的相同 
  8. <p id="demo"></p> 
  9.  
  10. <script> 
  11. d = new Date(); 
  12. document.getElementById("demo").innerHTML = d.toString(); 
  13. </script> 

toUTCString()方法

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

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

toDateString() 方法

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

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

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

三、总结

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

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

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

 

责任编辑:姜华 来源: 前端进阶学习交流
相关推荐

2021-02-02 18:39:05

JavaScript

2020-11-10 10:48:10

JavaScript属性对象

2021-06-04 09:56:01

JavaScript 前端switch

2021-01-29 18:41:16

JavaScript函数语法

2021-05-18 08:30:42

JavaScript 前端JavaScript时

2021-03-09 14:04:01

JavaScriptCookie数据

2021-01-26 23:46:32

JavaScript数据结构前端

2021-03-05 18:04:15

JavaScript循环代码

2024-04-19 14:23:52

SwitchJavaScript开发

2023-09-06 14:57:46

JavaScript编程语言

2023-07-30 15:18:54

JavaScript属性

2024-01-30 13:47:45

2023-06-01 17:10:12

HTMLJavaScript

2022-05-13 16:21:38

javascrip脚本SVG

2021-04-20 11:20:24

Java开发运算符

2021-05-07 14:17:01

JavaScript元素网页

2021-11-26 11:10:07

JavaScript 节点导航

2023-08-27 15:18:17

JavaScriptRegExp

2023-06-06 15:45:40

JavaScript数组

2024-07-02 14:14:18

点赞
收藏

51CTO技术栈公众号