JavaScript获取时区实现过程解析

 更新时间:2020年09月24日 08:32:19   作者:TonyStudio  
这篇文章主要介绍了JavaScript获取时区实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

在一个大型的项目中,不可避免会出现操作时间的业务,比如时间的格式化,比如时间的加减,我们一般会直接使用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库方便一点,当然,只是显示一下时区之类的,可以直接用上面简单处理即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • javascript 包裹节点 提高效率

    javascript 包裹节点 提高效率

    模仿jQuery,创建几个包裹节点的方法,发现jQuery的方法很低效啊,下一次他又可以说这几个方法可以提升了多少多少了。
    2010-02-02
  • js判断浏览器是否支持html5

    js判断浏览器是否支持html5

    这篇文章主要介绍了如何使用js判断浏览器是否支持html5,需要的朋友可以参考下
    2014-08-08
  • 纯javascript移动优先的幻灯片效果

    纯javascript移动优先的幻灯片效果

    这篇文章主要介绍了纯javascript实现移动优先的幻灯片效果,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • bootstrap table 多选框分页保留示例代码

    bootstrap table 多选框分页保留示例代码

    在使用bootstrap table的复选框功能的时候,由于采用服务端分页,当在第一页选择了某些数据,然后点击第二页选择一些数据,再次点回第一页,发现原先选择的数据已经清空了,原来的多选框并不支持翻页保留多选数据,怎么解决呢,下面小编给大家分享下解决思路
    2017-03-03
  • JS+CSS实现六级网站导航主菜单效果

    JS+CSS实现六级网站导航主菜单效果

    这篇文章主要介绍了JS+CSS实现六级网站导航主菜单效果,涉及JavaScript遍历页面元素及动态修改css属性的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • javascript添加前置0(补零)的几种方法

    javascript添加前置0(补零)的几种方法

    很多时候为了显示格式,需要在某一字符串不满位的情况下进行前补0操作。下面这篇文章就给大家主要介绍了javascript添加前置0(补零)的几种方法,文中给出了详细的示例代码,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • js菜单点击显示或隐藏效果的简单实例

    js菜单点击显示或隐藏效果的简单实例

    本篇文章主要是对js菜单点击显示或隐藏效果的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • javascript来定义类的规范小结

    javascript来定义类的规范小结

    javascript来定义类的规范,有利于代码的可阅读性。
    2010-11-11
  • js 客户端打印html 并且去掉页眉、页脚的实例

    js 客户端打印html 并且去掉页眉、页脚的实例

    下面小编就为大家带来一篇js 客户端打印html 并且去掉页眉、页脚的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Javascript和jQuery的深浅拷贝详解

    Javascript和jQuery的深浅拷贝详解

    这篇文章主要为大家详细介绍了Javascript和jQuery的深浅拷贝,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02

最新评论