介绍
在 JavaScript 中,您可能需要创建一个具有日历、火车时间表或界面的网站来设置约会。这些应用程序需要根据用户的当前时区显示相关时间,或对抵达和出发或开始和结束时间进行计算。
为了实现所有这些目标和更多,JavaScript配备了内置的日期对象和相关方法,本教程将介绍如何在JavaScript中格式化和使用日期和时间。
日期对象
Date object是JavaScript内置的对象,存储日期和时间,提供了一些内置的方法来格式化和管理这些数据。
默认情况下,没有提供参数的新日期实例会创建与当前日期和时间相匹配的对象。
要演示JavaScript的日期,让我们创建一个变量,并将当前日期分配给它。
1[label now.js]
2
3// Set variable to current date and time
4const now = new Date();
5
6// View the output
7now;
1[secondary_label Output]
2Wed Oct 18 2017 12:41:34 GMT+0000 (UTC)
查看输出时,我们有一个包含以下内容的日期字符串:
| Day of the Week | Month | Day | Year | Hour | Minute | Second | Timezone |
|---|---|---|---|---|---|---|---|
| Wed | Oct | 18 | 2017 | 12 | 41 | 34 | GMT+0000 (UTC) |
日期和时间被分开并以我们作为人类可以理解的方式打印出来。
然而,JavaScript 理解日期是基于从 Unix 时间中衍生的 timestamp,这是由自 1970 年 1 月 1 日午夜以来过去的毫秒数组成的值。
1// Get the current timestamp
2now.getTime();
1[secondary_label Output]
21508330494000
现行时刻印的输出中出现的大数表示与上面的 2017 年 10 月 18 日相同的值。
Epoch time,也被称为零时间,由日期字符串 01 January, 1970 00:00:00 Universal Time (UTC) 和由 `0' 时刻印表示。
1[label epoch.js]
2
3// Assign the timestamp 0 to a new variable
4const epochTime = new Date(0);
5
6epochTime;
1[secondary_label Output]
201 January, 1970 00:00:00 Universal Time (UTC)
Epoch 时间被选为计算机在早期编程中测量时间的标准,它是 JavaScript 所使用的方法,重要的是要了解时间标签和日期字符串的概念,因为这两者都可能取决于应用程序的设置和目的。
到目前为止,我们已经学会了如何基于当前时间创建一个新的日期实例,以及如何基于时刻印创建一个新的日期实例,总共有四种格式,您可以在JavaScript中创建一个新的日期。
| Date Creation | Output |
|---|---|
new Date() | Current date and time |
new Date(timestamp) | Creates date based on milliseconds since Epoch time |
new Date(date string) | Creates date based on date string |
new Date(year, month, day, hours, minutes, seconds, milliseconds) | Creates date based on specified date and time |
为了展示指向特定日期的不同方式,我们将创建新的日期对象,以三个不同的方式表示1776年7月4日下午12点30分 GMT。
1[label usa.js]
2
3// Timestamp method
4new Date(-6106015800000);
5
6// Date string method
7new Date("July 4 1776 12:30");
8
9// Date and time method
10new Date(1776, 6, 4, 12, 30, 0, 0);
三个例子首先创建一个包含相同信息的日期。
您会注意到时刻印的方法有一个负数;任何在 Epoch 时间之前的日期将被表示为负数。
在日期和时间方法中,我们的秒和毫秒设置为0。如果从日期创建中缺少任何数字,它将默认为0。然而,序列不能改变,所以如果你决定放下一个数字,请记住这一点。
恢复与得到的日期
一旦我们有一个日期,我们可以使用各种内置的方法访问日期的所有组件。 这些方法将返回与本地时区相关的日期的每个部分。 每个方法都以得到开始,并返回相对数目。
++ 日期/时间 + 方法 + 范围 + 例
- . -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 0-11 = 1月 = |. 日 (月) __________________________________________________________________________________________ 日 (周) ___________________________________ 0-6 = 星期天 = ______________________________ 时间 : 'GetHours ()' : : : : : : : : : : : : : : : 第二次++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Epoch时间以来的几百万秒
让我们根据1980年7月31日创建一个新的日期,并将其分配给一个变量。
1[label harryPotter.js]
2
3// Initialize a new birthday instance
4const birthday = new Date(1980, 6, 31);
现在我们可以使用我们的所有方法来获取每个日期组件,从年到毫秒。
1[label getDateComponents.js]
2
3birthday.getFullYear(); // 1980
4birthday.getMonth(); // 6
5birthday.getDate(); // 31
6birthday.getDay(); // 4
7birthday.getHours(); // 0
8birthday.getMinutes(); // 0
9birthday.getSeconds(); // 0
10birthday.getMilliseconds(); // 0
11birthday.getTime(); // 333849600000 (for GMT)
有时可能只需要提取日期的一部分,而内置的获取方法是你将使用的工具来实现这一点。
举个例子,我们可以测试当前日期对10月3日的日期和月度,看看它是否是10月3日。
1[label oct3.js]
2
3// Get today's date
4const today = new Date();
5
6// Compare today with October 3rd
7if (today.getDate() === 3 && today.getMonth() === 9) {
8 console.log("It's October 3rd.");
9} else {
10 console.log("It's not October 3rd.");
11}
1[secondary_label Output]
2It's not October 3rd.
由于在写作时,不是10月3日,控制台反映了这一点。
内置的日期方法以得到开头,允许我们访问日期组件,返回与我们从实例化对象中获取的数字。
用设置更改日期
对于我们上面的所有获取方法,有一个相应的设置方法。当获取用于从日期中获取特定组件时,设置用于修改日期组件。
++ 日期/时间 + 方法 + 范围 + 例
- . -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 日 (月) _______________________________________________________ 日(周) ___________________________________ 0-6 = 星期天 = ______________________________ 时间: 时间: 时间: 时间: 时间: 时间: 时间: 时间: 时间: 时间: 时间: 时间: 第二次 ============================================================================================================================================================================================================================== Epoch时间以来的几百万秒
我们可以使用这些设置方法来修改一个、多个或所有日期组件,例如,我们可以从上面的生日变量更改为1997而不是1980。
1[label harryPotter.js]
2
3// Change year of birthday date
4birthday.setFullYear(1997);
5
6birthday;
1[secondary_label Output]
2Thu Jul 31 1997 00:00:00 GMT+0000 (UTC)
我们在上面的例子中看到,当我们称呼生日变量时,我们将新年作为输出的一部分。
以设置开始的内置方法允许我们修改一个日期对象的不同部分。
使用 UTC 的日期方法
上面讨论的get方法可以根据用户的本地时区设置来检索日期组件。为了增加对日期和时间的控制,您可以使用getUTC方法,这些方法与get方法完全相同,但它们基于 UTC(协调通用时间)标准计算时间。
++ 日期/时间 + 方法 + 范围 + 例
- . -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 0-11 = 1月 =
|. 日 (月) _________________________________________________________________________________________________________ 日(周) ________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________ 0-6 = 星期天 =
______________________________ 时间
GetUTCHours ()' | 0-23 | 0=午夜 | |分钟 | 0-59 | . 第二次GetUTCseconds ()' | 0-59 | | Milisecond |`GetUTCMillise ()' 0 -999 |
要测试本地和UTC的得到方法之间的差异,我们可以运行以下代码。
1[label UTC.js]
2
3// Assign current time to a variable
4const now = new Date();
5
6// Print local and UTC timezones
7console.log(now.getHours());
8console.log(now.getUTCHours());
运行此代码会打印出当前时间和UTC时区的时间. 如果您目前处于UTC时区,来自运行上述程序的数字将是相同的。
UTC是有用的,因为它提供了一个国际时间标准的参考,因此可以保持你的代码在不同时区一致,如果它适用于你正在开发的东西。
结论
在本教程中,我们学会了如何创建一个日期对象的实例,并使用其内置的方法访问和修改特定日期的组件。
知道如何使用日期对于 JavaScript 中的许多常见任务至关重要,因为这可以让您从设置重复报告到在正确的时区中显示日期和时间表等许多事情。