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在事件监听方面的兼容性小结
Apr 07 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
泛谈JS逻辑判断选择器 || &&
2019/05/24 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
深入理解Python异常处理的哲学
2019/02/01 Python
python设置环境变量的作用和实例
2019/07/09 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
Python表达式的优先级详解
2020/02/18 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
经典c++面试题二
2015/08/14 面试题
房产转让协议书
2014/04/11 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
企业年检委托书范本
2014/10/14 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis