如何使用 JavaScript 将 UTC 日期时间转换为本地日期时间?


时区处理是每个 web 应用程序的重要组成部分。后端记录的时间通常为 UTC 格式。但是,当显示给用户时,必须将其转换为用户的本地时间。这可以通过 JavaScript 实现。在本博文中,我们将了解如何使用 JavaScript 将 UTC 日期时间转换为本地日期时间。

JavaScript 日期

JavaScript 包含一个“Date”类,允许我们处理日期和时间。“Date”类包含各种用于处理日期和时间的方法,包括:

Date() - 返回以毫秒表示的当前日期和时间 getTime() 返回以毫秒表示的当前时间

getUTCFullYear() - 返回日期在 UTC 时区的年份。

getUTCMonth() - 返回日期在 UTC 时区的月份。(注意:月份从 0 开始计数,0 代表一月)

getUTCDate() - 返回日期在 UTC 时区的日期。

getUTCHours() - 返回日期在 UTC 时区的时。

getUTCMinutes() - 返回日期在 UTC 时区的分钟。

getUTCSeconds() - 返回日期在 UTC 时区的秒。

将 UTC 转换为本地时间

我们必须使用 getTimezoneOffset() 方法将 UTC 日期时间转换为本地日期时间。此方法返回 UTC 与本地时间之间的分钟差。然后,可以使用此分钟差将 UTC 日期时间转换为本地日期时间。

示例

例如,以下代码将 UTC 日期时间转换为本地日期时间:

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
   <script>
      var utc = new Date();
      var offset = utc.getTimezoneOffset();
      var local = new Date(utc.getTime() + offset * 60000);
      document.getElementById("result").innerHTML = local;
   </script> 
</body>
</html>

在这里,我们可以看到一个名为“utc”的 New Date 对象,它保存当前的 UTC 日期和时间。然后,我们使用 getTimezoneOffset() 函数计算 UTC 与本地时间之间的分钟差。最后,我们通过将此毫秒数添加到 UTC 时间来计算本地时间。

类似地,我们可以将指定的 UTC 日期时间转换为本地日期时间。要实现相同的功能,只需将 UTC 日期和时间作为参数提供给 Date() 函数 Object() { [native code] }。现在,让我们看看将“2018-11-12 12:00:00”的 UTC 日期时间转换为本地日期时间的代码:

示例

<!DOCTYPE html>
<html>
<head>
   <title>Date Example</title>
</head>
<body>
   <div id="result"></div>
   <script>
      var utc = new Date("2018-11-12 12:00:00");
      var offset = utc.getTimezoneOffset();
      var local = new Date(utc.getTime() + offset * 60000);
      document.getElementById("result").innerHTML = "UTC : " + utc + "<br>" + "Local : " + local;
   </script>
</body>
</html>

我们将 UTC 日期和时间作为字符串传递给 Date() 构造函数。然后,我们使用与之前相同的方法将 UTC 日期时间转换为本地日期时间。

将本地时间转换为 UTC

现在,我们如何从本地时间转换为 UTC?要将本地日期时间转换为 UTC 日期时间,我们可以再次使用 getTimezoneOffset() 方法。因为此函数返回 UTC 与本地时间之间的分钟差。可以使用此差值将本地日期时间转换为 UTC 日期时间。

示例

例如,以下代码将本地日期时间转换为 UTC 日期时间:

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
   <script>
      var local = new Date();
      var offset = local.getTimezoneOffset();
      var utc = new Date(local.getTime() - offset * 60000);
      document.getElementById("result").innerHTML = utc;
   </script>
</body>
</html>

在上面的代码中,我们首先创建了一个名为“local”的新 Date 对象,其中包含当前的本地日期和时间。然后,我们使用 getTimezoneOffset() 方法获取 UTC 与本地时间之间的分钟差。从以毫秒表示的本地时间中减去此值后,我们得到了 UTC 时间。

我们还可以通过将本地日期和时间作为参数传递给 Date() 构造函数,将特定的本地日期时间转换为 UTC 日期时间。例如,以下代码将“2018-11-12 12:00:00”的本地日期时间转换为 UTC 日期时间:

示例

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
   <script>
      var local = new Date("2018-11-12 12:00:00");
      var offset = local.getTimezoneOffset();
      var utc = new Date(local.getTime() - offset * 60000);
      document.getElementById("result").innerHTML = utc;
   </script> 
</body>
</html>

我们将本地日期和时间作为字符串传递给 Date() 构造函数。然后,我们使用与之前相同的方法将本地日期时间转换为 UTC 日期时间。

结论

在本教程中,我们学习了如何使用 JavaScript 将 UTC 日期时间转换为本地日期时间。我们还了解到,JavaScript Date 类提供了几种处理日期和时间的方法,例如 getTimezoneOffset(),可用于将 UTC 日期时间转换为本地日期时间。我们还学习了如何使用相同的方法在本博文中将本地日期时间转换为 UTC 日期时间。需要注意的是,时区处理是任何 web 应用程序的重要方面,正确转换时间非常重要,以便能够正确地将其显示给用户。

更新于:2023年2月21日

26K+ 次浏览

启动您的 职业生涯

完成课程获得认证

开始
广告
© . All rights reserved.