在一個(gè)大型的項(xiàng)目中，不可避免會(huì)出現(xiàn)操作時(shí)間的業(yè)務(wù)，比如時(shí)間的格式化，比如時(shí)間的加減，我們一般會(huì)直接使用moment.js庫(kù)來(lái)做，畢竟穩(wěn)定可靠，也方便，那當(dāng)我們系統(tǒng)只是幾個(gè)簡(jiǎn)單頁(yè)面，對(duì)時(shí)間的操作并不是很大，引入庫(kù)文件并不是很必須的情況，我們需要時(shí)區(qū)展示怎么辦？是不是可以用瀏覽器支持的原生方法來(lái)實(shí)現(xiàn)？

時(shí)區(qū)

啥是時(shí)區(qū)？

時(shí)區(qū)是地球上的區(qū)域使用同一個(gè)時(shí)間定義。以前，人們通過(guò)觀察太陽(yáng)的外置（時(shí)角）決定時(shí)間，這就使得不同經(jīng)度的地方的時(shí)間各有不同，為了統(tǒng)一使用同一個(gè)時(shí)間，就引入了時(shí)區(qū)的概念。時(shí)區(qū)通過(guò)設(shè)立一個(gè)標(biāo)準(zhǔn)時(shí)間部分地解決了這個(gè)問(wèn)題。世界各國(guó)位于地球的不同位置，因此不同國(guó)家，特別是東西跨度大的國(guó)家日出、日落時(shí)間必定有偏差，這些偏差就是時(shí)差。

時(shí)區(qū)表示法

協(xié)調(diào)世界時(shí)（UTC）是最主要的世界時(shí)間標(biāo)準(zhǔn)，其以院子時(shí)秒長(zhǎng)為基礎(chǔ)，在時(shí)刻上盡量接近于格林威治標(biāo)準(zhǔn)時(shí)間。協(xié)調(diào)世界時(shí)是世界上調(diào)調(diào)節(jié)時(shí)鐘和時(shí)間的主要標(biāo)準(zhǔn)。如果時(shí)間是以協(xié)調(diào)世界時(shí)（UTC）表示，則在時(shí)間后面加上“Z”，“Z”是協(xié)調(diào)世界時(shí)中0時(shí)區(qū)的標(biāo)志。UTC時(shí)間也叫祖魯時(shí)間，因?yàn)樵诒奔s音標(biāo)字母中用“Zulu”表示“Z”。

UTC偏移量的表示形式為：±[hh]:[mm]、±[hh][mm]或者±[hh]。比如北京時(shí)間比協(xié)調(diào)世界時(shí)（UTC）早八小時(shí)，那么應(yīng)當(dāng)表示為：UTC+8。

JavaScript獲得當(dāng)前客戶端的時(shí)區(qū)

Intl對(duì)象是ECMAScript國(guó)際化API的一個(gè)命名空間，它提供了精確的字符串對(duì)比、數(shù)字格式化和日期格式化。我們需要使用這個(gè)API的DateTimeFormat對(duì)象。具體可以參考：MDN Intl.DateTimeFormat

獲得客戶端當(dāng)前時(shí)區(qū)：

Intl.DateTimeFormat().resolvedOptions().timeZone

可以看到輸出：Asia/Shanghai，即我所在時(shí)區(qū)為上海。

我們知道了在哪個(gè)時(shí)區(qū)，但是我們需要同時(shí)表示UTC+n的形式，那我們?cè)趺粗喇?dāng)前時(shí)區(qū)的UTC偏移量呢？

我們可以通過(guò)Date對(duì)象實(shí)例的getTimezoneOffset方法獲?。ㄗ⒁夥祷氐慕Y(jié)果的單位為分）：

new Date().getTimezoneOffset()

可以看到輸出的是-480，這樣獲得到的是0時(shí)區(qū)的時(shí)間差(0時(shí)區(qū)減去當(dāng)前所在時(shí)區(qū)，單位是分鐘)。

中國(guó)標(biāo)準(zhǔn)時(shí)間是以東八區(qū)為準(zhǔn)，比0時(shí)區(qū)的時(shí)間要早8小時(shí)。所以是-480，除以60就是所在時(shí)區(qū)：然后-480 / 60 = -8，即現(xiàn)在這個(gè)時(shí)區(qū)的偏移量為0 - (-8) = 8，即表示為：UTC+8 ，代碼為：

’UTC+’ + (0 - new Date().getTimezoneOffset() / 60); // 輸出：UTC+8

需要注意的是，不管你以何參數(shù)實(shí)例化一個(gè)Date對(duì)象，js在本地存儲(chǔ)時(shí)，都會(huì)轉(zhuǎn)化為本地時(shí)區(qū)，js不會(huì)幫你存儲(chǔ)實(shí)例化該日期時(shí)的時(shí)區(qū)信息。

相比較來(lái)說(shuō)，moment.js是一個(gè)很好的時(shí)間處理的庫(kù)，如果有時(shí)間操作的業(yè)務(wù)還是直接使用moment.js庫(kù)方便一點(diǎn)，當(dāng)然，只是顯示一下時(shí)區(qū)之類的，可以直接用上面簡(jiǎn)單處理即可。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。