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 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
Javascript的this用法
Jan 16 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
javaScript中"=="和"==="的区别详解
Mar 16 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
微信小程序实现保存图片到相册功能
Nov 30 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
详解react-redux插件入门
2018/04/19 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
运动会口号16字
2014/06/07 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
庆元旦活动总结
2014/07/09 职场文书
安全承诺书格式范本
2015/04/28 职场文书
少年犯观后感
2015/06/11 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
浅谈pytorch中的dropout的概率p
2021/05/27 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB