跟異國他鄉的朋友們微信聊天的時候,經常面臨時差的問題。每次想要確定對方現在是幾點,總是要口算一下,有時忘記具體時差,或者涉及跨天,還得打開瀏覽器查一下,很不方便。有什麼方法可以把朋友們所在城市的時間集中起來隨時供自己查看呢?於是想到了微信小程式。找了找市面上的時間小程式,不是功能太雜就是小廣告太多,... ...
前言
跟異國他鄉的朋友們微信聊天的時候,經常面臨時差的問題。我每次想要確定對方現在是幾點,總是要口算一下,有時忘記具體時差,或者涉及跨天,還得打開瀏覽器查一下,很不方便。有什麼方法可以把朋友們所在城市的時間集中起來隨時供自己查看呢?於是想到了微信小程式。找了找市面上的時間小程式,不是功能太雜就是小廣告太多,不滿意。
為什麼不自己動手量身打造一個呢?
行動起來。
首先快速明確需求
很簡單:
- 需要展示時間的城市初定:加州、紐約,再加北京做對比
- 需要顯示具體的時分秒,和年月日
- 需要實時變化
- 在其他國家也能正確展示時間
然後創建項目開擼
怎麼創建和前期的準備就不在這裡展開了,相信不少人都熟悉。如果不熟悉小程式開發的可以參考官網 或者我的另一篇文章如何開發微信小程式
,上面有對如何開發小程式的簡明扼要的的介紹。
關鍵邏輯
這個小程式的核心是時間的處理。如何得到其他地區的時刻信息?
這還不簡單?
先獲取本地時刻,然後加上或者減去另外一個地點與國內(北京時間)的時差(小時),最多再處理一下跨天的情況,不就得到其他地點的時刻了?
我一開始也是這麼想的,做完覺得還挺美,準備提交的時候,突然意識到問題:我時差全是基於北京時間計算的,換在其他國家訪問,獲取的本地時間已經不是北京時間了,時差應該變才對,寫死了時差可還行?!發佈一個只能在國內使用的雞肋時間工具,可不是我的風格!
搗鼓一陣,新方案出爐:
- 想辦法獲得零時區的時間
- 獲取不同地區與零時區的時差(時區)
- 用零時區的時間加減與零時區的時差(時區),得到各地的絕對時間
1. 獲得零時區的時間
零時區,也叫中時區,位於英國格林威治本初子午線上。該時區的地方時,叫做格林威治時間,也叫世界時。
我們不能直接獲得格林威治時間,但是我們可以獲得本地與格林威治的時間差:
const diff = new Date().getTimezoneOffset() // 單位為分鐘
然後根據本地時間和時間差獲得格林威治時間:
const absTime = new Date().getTime() + diff * 60 * 1000;
2. 查詢各地時區
格林威治本初子午線將地球劃分為東西兩個半球,格林威治本初子午線為零時區,往西依次為西一區到西十一區,往東依次為東一區到東十一區,西十二區和東十二區重合成為東西十二區,一共劃分了24個時區,每個時區相差正好是1個小時。
北京是東八區,紐約是西五區,加州是西八區。
完整時區地圖:
3. 計算各地的絕對時間
東時區的時刻比零時區快,西時區的時刻比零時區慢,所以東時區為正,西時區為負,所有時間計算記得轉換為毫秒。
let localTime = new Date(absTime + timeZone * 60 * 60 * 1000);
獲取任何時區的絕對時間的完整核心代碼:
/**
* timeZone: 東n區為正,西n區為負, 單位為小時
*/
const getFullTimeInfo = (timeZone, country, spliter) => {
//獲取本地時間與格林威治時間的時間差(註意是分鐘,記得轉換)
const diff = new Date().getTimezoneOffset();
//根據本地時間和時間差獲得格林威治時間
const absTime = new Date().getTime() + diff * 60 * 1000;
//根據格林威治時間和各地時區,得到各地時區的時間
let localTime = new Date(absTime + timeZone * 60 * 60 * 1000)
return {
time: formatTime(localTime, spliter)
};
}
發佈
很快,第一版就完成了。
剛開始這個樣子略醜,有點裸奔的趕腳。不過第一版最主要是核心功能,簡陋的界面只是暫時的。
給當地的朋友檢驗確定時間展示正確後,提交代碼、提交審核,2天後收到審核通過的通知(吐槽騰訊的審核效率