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仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
JavaScript Promise 用法
Jun 14 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 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 foreach正序倒序输出示例代码
2014/07/01 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
python opencv实现运动检测
2018/07/10 Python
python+opencv实现阈值分割
2018/12/26 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
蔻驰法国官网:COACH法国
2018/11/14 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
初中生物教学反思
2014/01/10 职场文书
军训学生自我鉴定
2014/02/12 职场文书
热门专业求职信
2014/05/24 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
污水处理保证书
2015/05/09 职场文书
商标侵权律师函
2015/05/27 职场文书
安全教育主题班会总结
2015/08/14 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
一行Python命令实现批量加水印
2022/04/07 Python
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技