JavaScript获取时区实现过程解析


Posted in Javascript onSeptember 24, 2020

在一个大型的项目中,不可避免会出现操作时间的业务,比如时间的格式化,比如时间的加减,我们一般会直接使用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 相关文章推荐
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
javascript常用代码段搜集
Dec 04 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
bootstrap的工具提示实例代码
May 17 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
TS 类型收窄教程示例详解
Sep 23 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 #Javascript
原生js实现购物车功能
Sep 23 #Javascript
详解微信小程序动画Animation执行过程
Sep 23 #Javascript
原生js实现分页效果
Sep 23 #Javascript
原生js实现购物车
Sep 23 #Javascript
javascript实现简易计算器功能
Sep 23 #Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 #Javascript
You might like
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
python中的函数用法入门教程
2014/09/02 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
销售业务员岗位职责
2014/01/29 职场文书
《争吵》教学反思
2014/02/15 职场文书
八项规定对照检查材料
2014/08/31 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python