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 自动增长的文本输入框实现代码
Apr 02 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
JS控制下拉列表左右选择实例代码
May 08 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
十天学会php之第七天
2006/10/09 PHP
php join函数应用
2011/05/04 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
详解Python迭代和迭代器
2016/03/28 Python
Python函数中的可变长参数详解
2019/09/12 Python
Java语言程序设计测试题改错题部分
2014/07/22 面试题
医科大学毕业生自荐信
2014/02/03 职场文书
检举信的格式及范文
2014/04/04 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
乱世佳人观后感
2015/06/08 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
字节飞书面试promise.all实现示例
2022/06/16 Javascript