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中this的四个绑定规则总结
Sep 26 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
小程序点餐界面添加购物车左右摆动动画
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结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
搭建vue开发环境
2018/07/19 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
python实现按长宽比缩放图片
2018/06/07 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
C#面试常见问题
2013/02/25 面试题
企划主管岗位职责
2013/12/12 职场文书
法人代表任命书范本
2014/06/05 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
管理失职检讨书
2015/05/05 职场文书
社区活动总结范文
2015/05/07 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
Nginx源码编译安装过程记录
2021/11/17 Servers
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python