如何使用 JavaScript 将 UTC 日期时间转换为本地日期时间？-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 12, 2023 pm 06:05 PM

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

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

JavaScript 日期

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

Date() - 以毫秒为单位返回当前日期和时间 getTime() 以毫秒为单位返回当前时间

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

getUTCMonth() - 返回 UTC 时区中的日期月份。

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 时间（以毫秒为单位）相加来计算本地时间。

Similarly, we can convert a specified UTC date time into a local date time. To accomplish the same thing, simply supply the UTC date and time as parameters to the Date() function Object() { [native code] }. Now, let's see the code to convert a UTC date time of "2018-11-12 12:00:00" to a local date time −

示例

<!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

Now, how can we get from local time to UTC? To convert local date time to UTC date time, we can use the getTimezoneOffset() method once more. Since this function returns the time difference in minutes between UTC and local time. This difference number can be used to convert the local date time to the UTC date time.

示例

例如，以下代码将本地日期时间转换为 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 时间。

We can also convert a specific local date time into a UTC date time by passing the local date and time as arguments to the Date() constructor. For example, the following code will convert a local date time of "2018-11-12 12:00:00" into the UTC date time −

示例

<!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 应用程序的一个重要方面，正确转换时间以便正确显示给用户也很重要。

以上是如何使用 JavaScript 将 UTC 日期时间转换为本地日期时间？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

10个JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味横生的jQuery游戏插件，让您的网站更具吸引力，提升用户粘性！虽然Flash仍然是开发休闲网页游戏的最佳软件，但jQuery也能创造出令人惊喜的效果，虽然无法与纯动作Flash游戏媲美，但在某些情况下，您也能在浏览器中获得意想不到的乐趣。 jQuery井字棋游戏游戏编程的“Hello world”，现在有了jQuery版本。源码 jQuery疯狂填词游戏这是一个填空游戏，由于不知道单词的上下文，可能会产生一些古怪的结果。源码 jQuery扫雷游戏

如何创建和发布自己的JavaScript库？Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

jQuery视差教程 - 动画标题背景Mar 08, 2025 am 12:39 AM

本教程演示了如何使用jQuery创建迷人的视差背景效果。我们将构建一个带有分层图像的标题横幅，从而创造出令人惊叹的视觉深度。更新的插件可与JQuery 1.6.4及更高版本一起使用。下载

如何在浏览器中优化JavaScript代码以进行性能？Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

Matter.js入门：简介Mar 08, 2025 am 12:53 AM

Matter.js是一个用JavaScript编写的2D刚体物理引擎。此库可以帮助您轻松地在浏览器中模拟2D物理。它提供了许多功能，例如创建刚体并为其分配质量、面积或密度等物理属性的能力。您还可以模拟不同类型的碰撞和力，例如重力摩擦力。 Matter.js支持所有主流浏览器。此外，它也适用于移动设备，因为它可以检测触摸并具有响应能力。所有这些功能都使其值得您投入时间学习如何使用该引擎，因为这样您就可以轻松创建基于物理的2D游戏或模拟。在本教程中，我将介绍此库的基础知识，包括其安装和用法，并提供一