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 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
VUE重点问题总结
Mar 19 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
用python 制作图片转pdf工具
2015/01/30 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
大学生如何写自荐信
2014/01/08 职场文书
产品开发计划书
2014/04/27 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
北京导游词
2015/02/12 职场文书
法律意见书范文
2015/05/20 职场文书
家长通知书家长意见
2015/06/03 职场文书
《落花生》教学反思
2016/02/16 职场文书