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

如何使用 javascript 将 utc 日期时间转换为本地日期时间?

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

JavaScript 日期

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

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

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

立即学习“Java免费学习笔记(深入)”;

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

getUTCDate() – 返回 UTC 时区中日期的月份和日期。

getUTCHours() – 返回 UTC 时区的日期小时。

getUTCMinutes() – 返回 UTC 时区的日期分钟数。

getUTCSeconds() – 返回 UTC 时区中日期的秒数。

将 UTC 转换为本地时间

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

示例

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

美间AI 美间AI

美间AI:让设计更简单

美间AI 45 查看详情 美间AI

   
var utc = new Date(); var offset = utc.getTimezoneOffset(); var local = new Date(utc.getTime() + offset * 60000); document.getElementById("result").innerHTML = local;

我们可以在这里看到一个名为“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 −

示例

   Date Example   
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 + "
" + "Local : " + local;

我们已将 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 日期时间 –

   
var local = new Date(); var offset = local.getTimezoneOffset(); var utc = new Date(local.getTime() - offset * 60000); document.getElementById("result").innerHTML = utc;

在上面的代码中,我们首先创建了一个名为“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 −

示例

   
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;

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

结论

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

以上就是如何使用 JavaScript 将 UTC 日期时间转换为本地日期时间?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/530078.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何制作带字幕的微信动态表情包?
上一篇 2025年11月9日 09:59:34
PHP框架入门推荐:Symfony vs Yii
下一篇 2025年11月9日 09:59:39

相关推荐

  • OOP中的继承机制在Java中是如何运作的

    Java通过extends实现继承,子类可复用父类属性和方法,提升代码可维护性;支持方法重写与super调用,遵循单继承与访问控制规则,构造函数需显式调用父类构造器。 Java中的继承机制通过extends关键字实现,允许一个类(子类)获取另一个类(父类)的属性和方法。这种机制支持代码重用,提升程序…

    2026年9月24日
    100
  • 主板的供电相数是否真的“越多越好”,还是已成为营销的噱头?

    供电相数并非越多越好,实际需结合CPU和使用场景。多相供电可分担电流、提升稳定性,但高相数常被倍相技术夸大,用料与散热不足则性能受限。普通用户6+2相已足够,仅高端超频需求者需12相以上。判断供电实力应关注Dr. MOS、PWM芯片、电感电容品质及散热设计,而非单纯相数。 主板供电相数是不是越多越好…

    2026年9月24日
    000
  • Yii框架中的数据关联:实现数据关系

    yii框架是一款高效、灵活的php框架,它拥有许多强大的功能,其中之一就是数据关联。数据关联可以让我们轻松地建立模型之间的关系,大大简化了开发工作。在本文中,我们将介绍yii框架中的数据关联,如何实现数据关系。 一、什么是数据关联 数据关联指的是将不同数据表的数据通过某种方式联系起来,形成一定的数据…

    用户投稿 2026年9月24日
    000
  • 胜利女神新的希望伊芙招募攻略

    在《胜利女神:新的希望》这款游戏中,全新ssr角色伊芙正式登场,许多玩家对如何获取该角色存在疑问。以下是关于伊芙的详细招募方式攻略,供有需要的玩家朋友参考。 《胜利女神:新的希望》伊芙获取方法 SSR角色「伊芙」限时加入卡池 活动时间:2025年9月24日更新维护完成后 至 2025年10月22日 …

    2026年9月24日
    100
  • 抖音粉丝LV0到LV6等级要卖多少钱,2025年抖音粉丝最新价格参考

    抖音达人带货等级从lv0到lv6级,都需要卖多少钱?很多新手朋友都不清楚带货等级是如何划分的额,也不清楚每个等级都需要多少交易额,相匹配的抖音粉丝数量是多少,接下来小编会带领大家详细了解下抖音粉丝带货等级的区别和2025年抖音最新的价格参考明细: 一,抖音粉丝等级划分标注和对应粉丝数量: 1,LV0…

    2026年9月24日
    000
  • PHP 中如何将 JSON 数组值声明为变量

    本文介绍了如何在 PHP 中从数据库获取数据并将其编码为 JSON 格式,然后通过 AJAX 请求传递到另一个页面。重点讲解了如何在接收页面解析 JSON 数据,并将 JSON 数组中的特定值提取并赋值给变量,以便在后续的 PHP 函数中使用。 从数据库获取数据并编码为 JSON 首先,我们需要从数…

    2026年9月24日
    000
  • safari浏览器怎么快速搜索当前网站内容_safari浏览器网站内快速搜索方法

    1、使用Safari内置查找功能可快速定位网页关键词,点击分享按钮后选择“在页面上查找”并输入内容即可高亮显示结果;2、通过地址栏输入“site:域名 关键词”实现站内搜索,精准获取当前网站信息;3、创建含搜索语法的书签(如https://en.wikipedia.org/wiki/Special:…

    2026年9月24日
    000
  • 如何列出DEB包内容 dpkg -L查看文件清单

    如何列出DEB包内容 dpkg -L查看文件清单如何列出DEB包内容 dpkg -L查看文件清单如何列出DEB包内容 dpkg -L查看文件清单如何列出DEB包内容 dpkg -L查看文件清单

    要查看已安装 deb 包所包含的文件列表,可使用命令 dpkg -l 包名,例如 dpkg -l nginx 会列出 nginx 安装的所有文件路径;该命令适用于 debian 及其衍生系统如 ubuntu,仅能查询已安装的包,且常用于查找配置文件、排查冲突或学习软件结构;为方便查看,可通过管道配合…

    2026年9月24日 用户投稿
    000
  • 行业首款风水双冷手机 红魔11 Pro系列真机开箱:酷炫水冷环、唯一纯平后盖

    行业首款风水双冷手机 红魔11 Pro系列真机开箱:酷炫水冷环、唯一纯平后盖行业首款风水双冷手机 红魔11 Pro系列真机开箱:酷炫水冷环、唯一纯平后盖行业首款风水双冷手机 红魔11 Pro系列真机开箱:酷炫水冷环、唯一纯平后盖行业首款风水双冷手机 红魔11 Pro系列真机开箱:酷炫水冷环、唯一纯平后盖

    10月13日,红魔正式宣布其新款旗舰手机——红魔11 pro系列将于10月17日发布,这款机型将成为全球首款融合风冷与水冷双重散热技术的智能手机。 今天,红魔游戏手机官方首次展示了红魔11 Pro系列的真机开箱画面。新机共推出四种配色方案:氘锋透明暗夜、氘锋透明银翼、暗夜骑士以及银翼战神,满足不同用…

    2026年9月24日 用户投稿
    200
  • 装机时最容易犯的错误是什么?

    忽视防静电措施会导致硬件损伤,操作前应洗手触摸金属并佩戴防静电手环;2. 主板铜柱安装错误易引发短路,需对照孔位准确安装;3. 电源接线漏插24pin或8pin供电是开机失败主因;4. 散热器安装不当致高温,硅脂应居中豌豆大小并确保扣紧。 装机时最容易犯的错误是忽略静电防护和接线混乱。这两个问题看似…

    2026年9月24日
    100
  • VSCode如何调试React前端应用 VSCode调试React组件的完整教程

    要调试react前端应用,首先需安装vscode的浏览器调试插件并配置launch.json文件,1. 安装“debugger for chrome”或对应浏览器的插件;2. 在项目根目录的.vscode文件夹中创建launch.json,配置type为chrome、request为launch、n…

    2026年9月24日
    100
  • iPhone13Plus密码怎么设置?教你为大屏iPhone添加安全保护

    设置iPhone 13 Plus密码可保护个人信息安全,打开“设置”中“面容ID与密码”选项,选择创建或更改密码,推荐使用自定字母数字密码并开启双重认证;即使启用面容ID,仍需密码作为备用解锁方式,若忘记密码可通过iCloud抹除设备重置,但会清除数据,建议提前备份。 iPhone 13 Plus设…

    2026年9月24日
    100
  • 360浏览器怎么升级到最新版本 360浏览器版本更新升级操作指南

    建议及时升级360浏览器至最新版本以确保安全与性能,可通过浏览器内置更新、官网手动下载或应用商店三种方式完成升级操作。 如果您发现当前使用的360浏览器功能受限或存在兼容性问题,可能是由于版本过旧导致。为确保浏览安全与性能稳定,建议及时将浏览器升级至最新版本。 本文运行环境:华为Mate 60 Pr…

    2026年9月24日
    100
  • Linux中如何安装Git工具_Linux安装Git工具的详细教程

    在Linux系统中安装Git工具是进行版本控制的第一步,尤其对于开发者来说非常关键。不同Linux发行版使用不同的包管理器,因此安装方式略有差异。下面将介绍在主流Linux系统中安装Git的详细步骤。 1. 在Ubuntu/Debian系统中安装Git Ubuntu和Debian系统使用apt作为包…

    2026年9月24日
    100
  • Yii框架中的身份认证与授权机制:保障应用程序的安全

    作为一种流行的php开发框架,yii框架对于web应用程序的安全性能有着很高的要求。其中,身份认证和授权机制是实现应用程序基本安全需求的关键技术之一。本文将重点介绍yii框架中的身份认证与授权机制,旨在帮助读者更好地理解和利用该框架实现应用程序的安全保障。 一、什么是身份认证和授权 在介绍Yii框架…

    用户投稿 2026年9月24日
    200
  • win11网络连接图标一直转圈显示正在识别怎么办_win11网络图标转圈解决方法

    重启网络服务、重置适配器、更改DNS及命令提示符重置网络组件可解决Windows 11网络图标转圈问题。 如果您在使用Windows 11时发现网络连接图标持续转圈,显示“正在识别”或无法正常获取网络连接状态,这通常意味着系统在尝试获取网络配置信息时遇到了阻碍。以下是多种可行的解决方法: 本文运行环…

    2026年9月24日
    100
  • 5118如何优化站内搜索排名_5118站内SEO的实用技巧

    5118是SEO辅助工具,通过挖掘长尾词、分析竞争对手和需求图谱来指导内容优化。利用其数据优化标题、布局关键词,并持续监控排名与流量,以数据驱动迭代策略,提升搜索引擎排名。 5118 不是直接优化你网站站内搜索排名的工具,它是一款专业的SEO辅助平台,核心功能是帮你挖掘关键词、分析数据,从而指导你进…

    2026年9月24日
    100
  • 如何在Java中处理StackOverflowError

    StackOverflowError由无限递归或调用栈过深引发,属Error类型,需预防为主;2. 常见于递归无终止、循环调用或深度嵌套;3. 避免方法需设可达成的基准条件,如阶乘递归中n≤1时返回1。 Java中的StackOverflowError通常由无限递归或过深的调用栈引发,属于Error…

    2026年9月24日
    100
  • 抖音1000粉丝价格明细,认准官方巨量千川合作模式

    粉丝是我们开展抖音业务的入场券,更多的粉丝数量意味着更多的商业机会,粉丝数量也决定了我们在抖音生态中的主动权力,熟话说“短期靠爆文涨粉,中期靠人设留粉,长期靠价值变现”,按照平台的算法规则和流量分配机制,一定数量的粉丝基础,能保障我们账号基本推流,而抖音1000粉丝是一个分水岭,为了帮助大家更快速更…

    2026年9月24日
    100
  • 开发者呼吁玩家冷静 《星露谷物语》1.7更新短期无望

    虽然《星露谷物语》将推出新版本的消息早已传开,但开发者concernedape最近的发言仍引发了关注。面对玩家对更新进度的追问,他坦言:“目前我不希望让大家抱有过高期待,距离1.7版本真正准备好还有很长一段时间。” 有观点指出,这一态度可能与他试图突破“《星露谷物语》之父”这一单一身份有关。他正全力…

    2026年9月24日
    200

发表回复

登录后才能评论
关注微信