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 组件之旅(二)编码实现和算法
Oct 28 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 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牛逼的面试题分享
2013/01/18 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
nodejs基础应用
2017/02/03 NodeJs
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python with语句用法原理详解
2020/07/03 Python
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
什么是GWT的Module
2013/01/20 面试题
介绍一下except的用法和作用
2015/01/22 面试题
大学毕业感言一句话
2014/02/06 职场文书
食品卫生管理制度
2015/08/06 职场文书
经销商会议开幕词
2016/03/04 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python