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 相关文章推荐
js 替换
Feb 19 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
小程序点餐界面添加购物车左右摆动动画
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获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php include类文件超时问题处理
2015/02/06 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
详解Vue的mixin策略
2020/11/19 Vue.js
Python模块学习 re 正则表达式
2011/05/19 Python
python 实现归并排序算法
2012/06/05 Python
python实现无证书加密解密实例
2014/10/27 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
儿童编程python入门
2018/05/08 Python
django使用LDAP验证的方法示例
2018/12/10 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Ref与out有什么不同
2012/11/24 面试题
毕业生求职自荐信怎么写
2014/01/08 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
超市采购员岗位职责
2015/04/07 职场文书
搞笑欢迎词大全
2015/09/30 职场文书