JavaScript獲取時區(qū)實現(xiàn)過程解析
在一個大型的項目中，不可避免會出現(xiàn)操作時間的業(yè)務(wù)，比如時間的格式化，比如時間的加減，我們一般會直接使用moment.js庫來做，畢竟穩(wěn)定可靠，也方便，那當我們系統(tǒng)只是幾個簡單頁面，對時間的操作并不是很大，引入庫文件并不是很必須的情況，我們需要時區(qū)展示怎么辦？是不是可以用瀏覽器支持的原生方法來實現(xiàn)？
時區(qū)
啥是時區(qū)？
時區(qū)是地球上的區(qū)域使用同一個時間定義。以前，人們通過觀察太陽的外置（時角）決定時間，這就使得不同經(jīng)度的地方的時間各有不同，為了統(tǒng)一使用同一個時間，就引入了時區(qū)的概念。時區(qū)通過設(shè)立一個標準時間部分地解決了這個問題。世界各國位于地球的不同位置，因此不同國家，特別是東西跨度大的國家日出、日落時間必定有偏差，這些偏差就是時差。
時區(qū)表示法
協(xié)調(diào)世界時（UTC）是最主要的世界時間標準，其以院子時秒長為基礎(chǔ)，在時刻上盡量接近于格林威治標準時間。協(xié)調(diào)世界時是世界上調(diào)調(diào)節(jié)時鐘和時間的主要標準。如果時間是以協(xié)調(diào)世界時（UTC）表示，則在時間后面加上“Z”，“Z”是協(xié)調(diào)世界時中0時區(qū)的標志。UTC時間也叫祖魯時間，因為在北約音標字母中用“Zulu”表示“Z”。
UTC偏移量的表示形式為：±[hh]:[mm]、±[hh][mm]或者±[hh]。比如北京時間比協(xié)調(diào)世界時（UTC）早八小時，那么應(yīng)當表示為：UTC+8。
JavaScript獲得當前客戶端的時區(qū)
Intl對象是ECMAScript國際化API的一個命名空間，它提供了精確的字符串對比、數(shù)字格式化和日期格式化。我們需要使用這個API的DateTimeFormat對象。具體可以參考：MDN Intl.DateTimeFormat
獲得客戶端當前時區(qū)：
Intl.DateTimeFormat().resolvedOptions().timeZone
可以看到輸出：Asia/Shanghai，即我所在時區(qū)為上海。
我們知道了在哪個時區(qū)，但是我們需要同時表示UTC+n的形式，那我們怎么知道當前時區(qū)的UTC偏移量呢？
我們可以通過Date對象實例的getTimezoneOffset方法獲?。ㄗ⒁夥祷氐慕Y(jié)果的單位為分）：
new Date().getTimezoneOffset()
可以看到輸出的是-480，這樣獲得到的是0時區(qū)的時間差(0時區(qū)減去當前所在時區(qū)，單位是分鐘)。
中國標準時間是以東八區(qū)為準，比0時區(qū)的時間要早8小時。所以是-480，除以60就是所在時區(qū)：然后-480 / 60 = -8，即現(xiàn)在這個時區(qū)的偏移量為0 - (-8) = 8，即表示為：UTC+8 ，代碼為：
'UTC+' + (0 - new Date().getTimezoneOffset() / 60); // 輸出：UTC+8
需要注意的是，不管你以何參數(shù)實例化一個Date對象，js在本地存儲時，都會轉(zhuǎn)化為本地時區(qū)，js不會幫你存儲實例化該日期時的時區(qū)信息。
相比較來說，moment.js是一個很好的時間處理的庫，如果有時間操作的業(yè)務(wù)還是直接使用moment.js庫方便一點，當然，只是顯示一下時區(qū)之類的，可以直接用上面簡單處理即可。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
模仿jQuery，創(chuàng)建幾個包裹節(jié)點的方法，發(fā)現(xiàn)jQuery的方法很低效啊，下一次他又可以說這幾個方法可以提升了多少多少了。2010-02-02
這篇文章主要介紹了如何使用js判斷瀏覽器是否支持html5,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了純javascript實現(xiàn)移動優(yōu)先的幻燈片效果，感興趣的小伙伴們可以參考一下2015-11-11
在使用bootstrap table的復(fù)選框功能的時候，由于采用服務(wù)端分頁，當在第一頁選擇了某些數(shù)據(jù)，然后點擊第二頁選擇一些數(shù)據(jù)，再次點回第一頁，發(fā)現(xiàn)原先選擇的數(shù)據(jù)已經(jīng)清空了，原來的多選框并不支持翻頁保留多選數(shù)據(jù)，怎么解決呢，下面小編給大家分享下解決思路2017-03-03
JS+CSS實現(xiàn)六級網(wǎng)站導(dǎo)航主菜單效果
這篇文章主要介紹了JS+CSS實現(xiàn)六級網(wǎng)站導(dǎo)航主菜單效果,涉及JavaScript遍歷頁面元素及動態(tài)修改css屬性的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
很多時候為了顯示格式，需要在某一字符串不滿位的情況下進行前補0操作。下面這篇文章就給大家主要介紹了javascript添加前置0(補零)的幾種方法,文中給出了詳細的示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
本篇文章主要是對js菜單點擊顯示或隱藏效果的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
javascript來定義類的規(guī)范，有利于代碼的可閱讀性。2010-11-11
下面小編就為大家?guī)硪黄猨s 客戶端打印html 并且去掉頁眉、頁腳的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家詳細介紹了Javascript和jQuery的深淺拷貝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02