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 相关文章推荐
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
Vue父组件监听子组件生命周期
Sep 03 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 面向对象实现代码
2009/11/11 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
python 自定义对象的打印方法
2019/01/12 Python
Python for循环与range函数的使用详解
2019/03/23 Python
python反编译学习之字节码详解
2019/05/19 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
导师对论文的学术评语
2015/01/04 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书