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 相关文章推荐
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
Vue路由权限控制解析
Nov 09 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通用防注入程序 推荐
2011/02/26 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
一份婚庆公司创业计划书
2014/01/11 职场文书
食品安全工作方案
2014/05/07 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
2014年预算员工作总结
2014/12/05 职场文书
倡议书范文大全
2015/04/28 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android