JavaScript获取时区实现过程解析

作者:TonyStudio 时间:2023-08-22 20:58:34 

在一个大型的项目中,不可避免会出现操作时间的业务,比如时间的格式化,比如时间的加减,我们一般会直接使用moment.js库来做,毕竟稳定可靠,也方便,那当我们系统只是几个简单页面,对时间的操作并不是很大,引入库文件并不是很必须的情况,我们需要时区展示怎么办?是不是可以用浏览器支持的原生方法来实现?

时区

啥是时区?

时区是地球上的区域使用同一个时间定义。以前,人们通过观察太阳的外置(时角)决定时间,这就使得不同经度的地方的时间各有不同,为了统一使用同一个时间,就引入了时区的概念。时区通过设立一个标准时间部分地解决了这个问题。世界各国位于地球的不同位置,因此不同国家,特别是东西跨度大的国家日出、日落时间必定有偏差,这些偏差就是时差。

时区表示法

协调世界时(UTC)是最主要的世界时间标准,其以院子时秒长为基础,在时刻上尽量接近于格林威治标准时间。协调世界时是世界上调调节时钟和时间的主要标准。如果时间是以协调世界时(UTC)表示,则在时间后面加上“Z”,“Z”是协调世界时中0时区的标志。UTC时间也叫祖鲁时间,因为在北约音标字母中用“Zulu”表示“Z”。

UTC偏移量的表示形式为:±[hh]:[mm]、±[hh][mm]或者±[hh]。比如北京时间比协调世界时(UTC)早八小时,那么应当表示为:UTC+8。

JavaScript获得当前客户端的时区

Intl对象是ECMAScript国际化API的一个命名空间,它提供了精确的字符串对比、数字格式化和日期格式化。我们需要使用这个API的DateTimeFormat对象。具体可以参考:MDN Intl.DateTimeFormat

获得客户端当前时区:

Intl.DateTimeFormat().resolvedOptions().timeZone

可以看到输出:Asia/Shanghai,即我所在时区为上海。

我们知道了在哪个时区,但是我们需要同时表示UTC+n的形式,那我们怎么知道当前时区的UTC偏移量呢?

我们可以通过Date对象实例的getTimezoneOffset方法获取(注意返回的结果的单位为分):

new Date().getTimezoneOffset()

可以看到输出的是-480,这样获得到的是0时区的时间差(0时区减去当前所在时区,单位是分钟)。

中国标准时间是以东八区为准,比0时区的时间要早8小时。所以是-480,除以60就是所在时区:然后-480 / 60 = -8,即现在这个时区的偏移量为0 - (-8) = 8,即表示为:UTC+8 ,代码为:

'UTC+' + (0 - new Date().getTimezoneOffset() / 60); // 输出:UTC+8

需要注意的是,不管你以何参数实例化一个Date对象,js在本地存储时,都会转化为本地时区,js不会帮你存储实例化该日期时的时区信息。

相比较来说,moment.js是一个很好的时间处理的库,如果有时间操作的业务还是直接使用moment.js库方便一点,当然,只是显示一下时区之类的,可以直接用上面简单处理即可。

来源:https://blog.tcs-y.com/2020/01/30/js-time-zone/

标签:JavaScript,时区
0
投稿

猜你喜欢

  • MySQL数据库查询之多表查询总结

    2024-01-13 21:49:47
  • 详解在node.js中require方法的加载规则

    2024-05-08 09:36:10
  • python服务器与android客户端socket通信实例

    2022-04-28 02:30:31
  • 公用样式模板的设计制作

    2009-09-13 21:27:00
  • MDB格式网站文件如何解压

    2008-07-02 12:48:00
  • JavaScript内置对象math,global功能与用法实例分析

    2024-04-22 22:36:47
  • javascript检测页面是否缩放的小例子

    2024-04-10 16:13:50
  • Centos7.3下mysql5.7.18安装并修改初始密码的方法

    2024-01-20 00:02:11
  • python仿evething的文件搜索器实例代码

    2022-05-05 09:05:15
  • C#中的委托和事件

    2007-09-26 20:50:00
  • pytorch中tensor的合并与截取方法

    2022-02-11 14:16:58
  • js下将字符串当函数执行的方法

    2024-06-15 23:01:25
  • python爬虫 模拟登录人人网过程解析

    2023-06-18 18:42:19
  • Python守护进程(daemon)代码实例

    2021-10-21 21:15:54
  • Mootools 1.2教程(6)——操纵HTML DOM元素

    2008-11-20 13:19:00
  • gliffy-confluence-plugin-9.1.2插件教程详解

    2022-05-02 06:21:21
  • 如何用Python对数学函数进行求值、求偏导

    2023-10-13 04:58:01
  • python实现高精度求自然常数e过程详解

    2023-12-01 05:21:51
  • Vue 实现拨打电话操作

    2024-05-09 15:09:53
  • ExtJs事件机制基本代码模型和流程解析

    2024-05-03 15:59:14
  • asp之家 网络编程 m.aspxhome.com