持續！修鍊之路

切換模式

幹嘛不自己上網查就好的 JavaScript 世界時鐘 | JS 地下城 - 004 ​

  • BOSS 弱點

    • 【特定技術】僅能使用原生 JS 開始，不能使用套件
    • 【特定技術】特別注意必須用 JS 處理各國時區

  • 【書寫能力】請寫一篇 BLOG 來介紹你的挑戰過程，並介紹 JavaScript 如何提供 GMT、UTC 時區語法，以及何謂 TimeStamp。

  • UI 設計稿

UI設計稿

絲路 思路 ​

一直以來都覺得 Date 是很複雜的東西，就懶得研究，實際研究之後的確有比較多的認識，不過我還是會盡量用套件處理時間的(握拳。

接下來就直接說明撰寫時的思路吧。



我的思考步驟 ​

  1. 採取的方式是，HTML 畫面上的地點文字是靜態的，其他的時間全部藉由 JS 動態帶入。
  2. 抓取要帶入時間&日期&地區文字的元素之後，這時的他們是 nodelist，可以使用部分的陣列方法，此時全部取得的 nodelist 裡相同的 index 對應的都是相同的地區。
  3. 由於 nodelist 的 index 是相對應的，就可以按照順序以抓取的地區透過 Date().toLocaleString() 的 timezone 選項逐一帶入 textContent 。
  4. 最後一步是使用 window.setInterval() 每隔一秒取得一次時間(反正也只有顯示分鐘數，就不用太精確吧)

備註:

  • timezone 被我單獨拉出來，因為這樣子方便維護(雖然我不會再打開這個檔案)
  • window.onload 這一步非常重要 (當瀏覽器讀取完成，才去執行抓取時間的函式)


程式碼 ​

javascript
function getTime() {
    let location = document.querySelectorAll('.location');
    let dateText = document.querySelectorAll('.date');
    let timeText = document.querySelectorAll('.time');

    let timezone = {
        'NEW YORK': 'America/New_York',
        LONDON: 'Europe/London',
        BANGKOK: 'Asia/Bangkok',
        TAIWAN: 'Asia/Taipei',
        SYDNEY: 'Australia/Sydney',
    };

    location.forEach((item, index) => {
        timeText[index].textContent = currentTime(timezone[item.textContent]).time;
        dateText[index].textContent = `${currentTime(timezone[item.textContent]).date} ${
            currentTime(timezone[item.textContent]).year
        }`;
    });
}

function currentTime(timeZone) {
    let locale = 'en-US';
    let options_YYYY = {
        timeZone,
        year: 'numeric',
    };
    let options_HHMM = {
        timeZone,
        hour12: false,
        hour: 'numeric',
        minute: '2-digit',
    };
    let options_MMDD = {
        timeZone,
        month: 'short',
        day: 'numeric',
    };
    return {
        year: new Date().toLocaleString(locale, options_YYYY),
        date: new Date().toLocaleString(locale, options_MMDD),
        time: new Date().toLocaleString(locale, options_HHMM),
    };
}

window.onload = getTime();
window.setInterval('getTime();', 1000);


GMT、UTC ​

原則上 GMT (Greenwich Mean Time) = UTC (International Atomic Time)，實際上不然。

GMT 是根據一天的時間(或是說地球自轉一圈的時間)計算的，但因目前自轉速度是有減速的跡象，所以 GMT 的一秒會越來越久，而 UTC 是根據銫原子固定震盪次數的時間計算，UTC 基本上是更穩定的。 參考來源 : https://pansci.asia/archives/84978



JavaScript 上的 UTC ​

建立一個 JavaScript Date 物件來指向某一個時間點。Date 物件是基於世界標準時間（UTC） 1970 年 1 月 1 日開始的毫秒數值來儲存時間。 參考來源 : https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Date



JavaScript Date 物件實體 ​

直接使用物件實體的方法來建立 Date 物件，不過字串解析時間時，充滿了各種坑，根據這邊的結論(直接看結論是怎樣?)，為了避免被各瀏覽器之間的支援度雷到，使用字串解析時間時要極度小心。

如果你要我給建議，我可以說相容性最高的應該就是 Sat, 24 Sep 2016 20:42:16 GMT 這種日期時間格式，但請注意這種格式的缺點是【如果你沒有加上 GMT 時區，瀏覽器預設就會將這種格式解析為使用者電腦的本地時間】，如果沒注意到時區部分，對於全球性或跨國瀏覽的使用者來說可能會出現錯誤的時間差。否則請一律使用 ISO-8601 標準日期時間格式 ( 2016-09T02:34:33.346Z )，這種格式的優點就是【瀏覽器只會將這種格式解析為 GMT/UTC 標準時區的時間】，這樣反而可以強迫你用具有時區的思維來開發程式，出現時差錯誤的問題也會減少。

直接過去參考一下吧!!! https://blog.miniasp.com/post/2016/09/25/JavaScript-Date-usage-in-details

坑~

Date 物件複雜的地方不只是它的進位並非十進位而已，年月日的進位還涉及閏年、星期幾的問題，以及全球各種不同語言、全球時區使用的本地化格式的問題等等各種問題。



timestamp ​

就是從 1970 年 01 月 01 日 0 分 0 秒起到現在的總毫秒數，注意，是毫秒數，通常取得之後會再乘以 1000，反正也不需要這麼精確 ? 就我所知 timestamp 會存起來做為判斷時間先後的依據，後取得的大於先取得的值，例如判斷。

javascript
new Date('1970-01-01').getTime(); // 0
new Date('2020-01-01').getTime(); // 1577836800000


時區 ​

實際使用時，時區是我最搞不懂的，因為 JS 會直接把取得的時間轉換為本地時間，所以不管怎麼處理最後得到的都會是瀏覽器的本地時間 QQ

JS 的 Date().toLocaleString() 有提供 timezone 的 option，但是有一些支援度的問題 (caniuse)，IE 還有其他部分瀏覽器不支援。但我就是要用 XD

之前有看到一篇文章有寫到，目前有在規劃日期的相關統整之類的，看這邊，但是目前普遍都會建議日期的處理使用工具函示庫比較安全，不然會容易有 bug ，最出名的 Moment.js ，不過現在 moment.js 也已經停止更新了(you probably don't need moment js anymore)，

總之先這樣吧 XDD ，菜雞不要說太多，會越說越錯。

參考 https://codertw.com/程式語言/644589/ > https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Date > https://blog.miniasp.com/post/2016/09/25/JavaScript-Date-usage-in-details

最後附上連結，如下 ​


本文章若有任何資訊誤植或侵權，煩請告知，我會立刻處理。

最後更新時間:

Buy Me A Coffee
0 %
MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog