開發一個時間小程序

前言

跟異國他鄉的朋友們微信聊天的時候，常常面臨時差的問題。我每次想要肯定對方如今是幾點，老是要口算一下，有時忘記具體時差，或者涉及跨天，還得打開瀏覽器查一下，很不方便。有什麼方法能夠把朋友們所在城市的時間集中起來隨時供本身查看呢？因而想到了微信小程序。找了找市面上的時間小程序，不是功能太雜就是小廣告太多，不滿意。

爲何不本身動手量身打造一個呢？

行動起來。

首先快速明確需求

很簡單：

1. 須要展現時間的城市初定：加州、紐約，再加北京作對比
2. 須要顯示具體的時分秒，和年月日
3. 須要實時變化
4. 在其餘國家也能正確展現時間

而後建立項目開擼

怎麼建立和前期的準備就不在這裏展開了，相信很多人都熟悉。若是不熟悉小程序開發的能夠參考 官網 或者個人另外一篇文章 如何開發微信小程序 ，上面有對如何開發小程序的簡明扼要的的介紹。

關鍵邏輯

這個小程序的核心是時間的處理。如何獲得其餘地區的時刻信息？

這還不簡單？
先獲取本地時刻，而後加上或者減去另一個地點與國內（北京時間）的時差（小時），最多再處理一下跨天的狀況，不就獲得其餘地點的時刻了？

我一開始也是這麼想的，作完以爲還挺美，準備提交的時候，忽然意識到問題：我時差全是基於北京時間計算的，換在其餘國家訪問，獲取的本地時間已經不是北京時間了，時差應該變纔對，寫死了時差可還行？！發佈一個只能在國內使用的雞肋時間工具，可不是個人風格！

搗鼓一陣，新方案出爐：

1. 想辦法得到零時區的時間
2. 獲取不一樣地區與零時區的時差（時區）
3. 用零時區的時間加減與零時區的時差（時區），獲得各地的絕對時間

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天后收到審覈經過的通知（吐槽騰訊的審覈效率😓），而後在小程序管理平臺點擊發布，哦了。

掃描二維碼，打開小程序，而後收藏。之後要看時間了，微信主界面向下一拉，打開個人時間工具，一眼就看到想要知道的時間信息，確實比以前便捷多了。功能雖然簡單，界面雖然簡陋，可是妥妥滴知足個人需求。

迭代

用了一陣子，以爲樣式啥的仍是得豐富豐富，因而花了一些時間作了一次改版，實時時間以時鐘效果展現，而且修改了佈局，順便重構了一下代碼，便於新增地區。

嗯，效果彷佛還行～

改BUG

前幾天跟澳洲的朋友聊天，聊着聊着竟然發現了個人程序的一個潛在BUG。

那天是4月4日的早晨（北京時間），我跟朋友吐槽個人一個疑惑：查詢悉尼時區爲東十區（即與北京相差2小時），可是爲啥查詢悉尼時間卻與北京相差3小時（因此我當時程序中是把悉尼做爲東十一區來計算的）。朋友說：是的沒錯，咱們這裏如今在使用夏令時，等夏令時結束就恢復2個小時時差了。而後一查，今年澳洲夏令時將在4月5號凌晨3點結束。。。

也就是說，距離這個BUG發做還有不到一天的時間。。。

立刻打開電腦，改BUG。。。

根據資料，得到美國和澳大利亞的夏令時規則：

• 美國

每一年的3月第二個星期日02:00:00，時鐘向前調整1小時，變爲03:00:00，開始夏令時。
每一年的11月第一個星期日02:00:00，時鐘向後調整1小時，變爲01:00:00，結束夏令時。

• 澳大利亞

每一年的10月第一個星期日02:00:00，時鐘向前調整1小時，變爲03:00:00，開始夏令時。
每一年的4月第一個星期日03:00:00，時鐘向後調整1小時，變爲02:00:00，結束夏令時。

關於夏令時，也挺有意思，有空我會另開一個篇幅來專門講述。

將夏令時的判斷邏輯加上：

/**
 * 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)

+  // 考慮夏令時
+  // judgeDST是我封裝好的一個判斷夏令時的方法
+  const isDST = judgeDST(localTime, country);
+  if (isDST) {
+    localTime = new Date(absTime + (timeZone + 1) * 60 * 60 * 1000)
+  }

  return {
    time: formatTime(localTime, spliter).split(':').slice(0,2).join(':'), 
    isDST
  };
}

有了如今的版本：

之後對這個小工具我還會不斷優化，會愈來愈靈活，好比支持地區選擇，這樣每一個人均可以定製本身的時差表了。能夠期待一下哦～

最後附上小程序二維碼，掃一掃便可體驗。

--
仍是毛爺爺說得好：本身動手豐衣足食。

Happy coding :)

文章同時發表於公衆號「前端手札」，喜歡的話能夠關注一下哦。

本文做者：ChampYin
轉載請註明出處： http://champyin.com/2020/04/08/開發一個時間小程序/