JavaScript獲取時(shí)區(qū)實(shí)現(xiàn)過程解析
在一個(gè)大型的項(xiàng)目中,不可避免會(huì)出現(xiàn)操作時(shí)間的業(yè)務(wù),比如時(shí)間的格式化,比如時(shí)間的加減,我們一般會(huì)直接使用moment.js庫來做,畢竟穩(wěn)定可靠,也方便,那當(dāng)我們系統(tǒng)只是幾個(gè)簡(jiǎn)單頁面,對(duì)時(shí)間的操作并不是很大,引入庫文件并不是很必須的情況,我們需要時(shí)區(qū)展示怎么辦?是不是可以用瀏覽器支持的原生方法來實(shí)現(xiàn)?
時(shí)區(qū)
啥是時(shí)區(qū)?
時(shí)區(qū)是地球上的區(qū)域使用同一個(gè)時(shí)間定義。以前,人們通過觀察太陽的外置(時(shí)角)決定時(shí)間,這就使得不同經(jīng)度的地方的時(shí)間各有不同,為了統(tǒng)一使用同一個(gè)時(shí)間,就引入了時(shí)區(qū)的概念。時(shí)區(qū)通過設(shè)立一個(gè)標(biāo)準(zhǔn)時(shí)間部分地解決了這個(gè)問題。世界各國位于地球的不同位置,因此不同國家,特別是東西跨度大的國家日出、日落時(shí)間必定有偏差,這些偏差就是時(shí)差。
時(shí)區(qū)表示法
協(xié)調(diào)世界時(shí)(UTC)是最主要的世界時(shí)間標(biāo)準(zhǔn),其以院子時(shí)秒長為基礎(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國際化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偏移量呢?
我們可以通過Date對(duì)象實(shí)例的getTimezoneOffset方法獲?。ㄗ⒁夥祷氐慕Y(jié)果的單位為分):
new Date().getTimezoneOffset()
可以看到輸出的是-480,這樣獲得到的是0時(shí)區(qū)的時(shí)間差(0時(shí)區(qū)減去當(dāng)前所在時(shí)區(qū),單位是分鐘)。
中國標(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ū)信息。
相比較來說,moment.js是一個(gè)很好的時(shí)間處理的庫,如果有時(shí)間操作的業(yè)務(wù)還是直接使用moment.js庫方便一點(diǎn),當(dāng)然,只是顯示一下時(shí)區(qū)之類的,可以直接用上面簡(jiǎn)單處理即可。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript中3個(gè)需要注意的運(yùn)算符
這篇文章主要介紹了Javascript中3個(gè)需要注意的運(yùn)算符,這3個(gè)運(yùn)算符的使用有很多需要注意的地方和有意思的地方,需要的朋友可以參考下2015-04-04JS獲取子節(jié)點(diǎn)、父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的方法實(shí)例總結(jié)
這篇文章主要介紹了JS獲取子節(jié)點(diǎn)、父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對(duì)子節(jié)點(diǎn)、父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)獲取相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2018-07-07web-view內(nèi)嵌H5與uniapp數(shù)據(jù)的實(shí)時(shí)傳遞解決方案
這篇文章主要介紹了web-view內(nèi)嵌H5與uniapp數(shù)據(jù)的實(shí)時(shí)傳遞,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07兼容Firefox的Javascript XSLT 處理XML文件
這篇文章主要介紹了兼容Firefox的Javascript XSLT 處理XML文件,需要的朋友可以參考下2014-12-12基于JavaScript實(shí)現(xiàn)移除(刪除)數(shù)組中指定元素
在Array對(duì)象中有給定的函數(shù)可以刪除數(shù)組中指定的元素,雖然非常好用,但是總感覺看不到摸不著的比較別扭,下面就分享一個(gè)自定義的刪除數(shù)組指定索引值元素的函數(shù),希望給大家一個(gè)全新的思路2016-01-01swiper實(shí)現(xiàn)導(dǎo)航滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了swiper實(shí)現(xiàn)導(dǎo)航滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12JavaScript之瀏覽器對(duì)象_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript可以獲取瀏覽器提供的很多對(duì)象,并進(jìn)行操作。下面通過本文給大家介紹JavaScript之瀏覽器對(duì)象的相關(guān)知識(shí),一起看看吧2017-07-07簡(jiǎn)單談?wù)凧avaScript寄生式組合繼承
寄生組合式繼承,是集寄生式繼承和組合繼承的有點(diǎn)與一身,主要是通過借用構(gòu)造函數(shù)來繼承屬性,通過原型鏈的混成形式來繼承方法,這篇文章主要給大家介紹了關(guān)于JavaScript寄生式組合繼承的相關(guān)資料,需要的朋友可以參考下2021-08-08JS對(duì)象數(shù)組中如何匹配某個(gè)屬性值
這篇文章主要介紹了JS對(duì)象數(shù)組中如何匹配某個(gè)屬性值,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09