14-1 Date 時間

Original: https://course.andys.pro/Javascript-Intro/14-1-date/

講義

1. Date 物件基礎

JavaScript 使用 Date 物件來處理日期與時間。

• 基準點：電腦的世界是從 1970 年 1 月 1 日 (UTC) 開始計算毫秒數的。
• Date.now()：回傳從 1970 年至今所經過的總毫秒數（時間戳記）。

2. 建立時間的方法

• 現在時間：var now = new Date();
• 指定日期 (數字)：new Date(2024, 0, 25)
  • 注意：JavaScript 的 月份是從 0 開始計算的 (0 代表 1 月，11 代表 12 月)。這是一個常見的陷阱。
• 指定日期 (字串)：new Date("October 10, 2024 10:30:00")

3. 常用的讀取方法 (Get)

當你建立一個 Date 物件後，可以使用以下方法取值：

• getFullYear()：取得西元年。
• getMonth()：取得月份 (0-11)，使用時記得加 1。
• getDate()：取得日期 (1-31)。
• getDay()：取得星期幾 (0-6)。其中 0 代表星期日。
• getHours() / getMinutes() / getSeconds()：取得時、分、秒。

4. 設定時間的方法 (Set)

你可以修改已存在的 Date 物件：

• setFullYear(2019)：將年份改為 2019。
• setMonth(5)：將月份改為 6 月。

5. 實務補充：Moment.js

原生的 JavaScript 時間處理比較繁瑣（例如要做「3 小時前」這種人性化顯示很麻煩）。在業界實戰中，常會搭配 Moment.js 或是 Day.js 等函式庫，來更輕鬆地格式化時間與處理多國語系顯示。

影片逐字稿 (AI 生成)

好 接下來我們看第十四章 時間與計時器好的 那我們來看Date這個物件然後我們在後面我們會學到就是說你可以用JavaScript等一段時間再執行比如說我想要這東西按一下等了三秒以後才跑出來或是說我想要每三秒它就咚咚咚一直跑出來set interval 就是每幾秒做一次這樣好 首先我們來看十四之一的Date的物件它的宣告方法還有它的方法首先呢 我們要建一個Date就是在這個Function 它其實是一個class叫它叫出來以後你就會得到目前的時間那這份講應該是二月多前所以這是它的時間好 那在Date呢 它是一個Function所以你可以放年 月 日 十分 秒 毫秒好 如果都沒有填的話 預設是0比如說我們這邊在Date我們填2019年11月25號可是很奇怪的是它跑出來的是12月那為什麼會這樣咧因為JS的1月是0好不好 這真的有點怪怪的好不好 它的201912月25號是2020的1月20好 沒關係 我們來做做看啦 就是然後我們講說2019對不對 它剛才是什麼12月25號然後裡面 欸 裡面35號 25號好 那我們去看一下這個New Day是怎樣有沒有 真的2020年1月所以它2019的意思是說是2020的意思然後 它 欸欸 不不不它2019是2019 可是12月1月12月1月所以要加1這意思嘛 然後進會對 應該是這樣對 應該是這樣好的 然後這邊呢大家注意一下喔就是 以電腦來說這個世界是1970年1月1號才開始標準時間是UTC標準時間是1970年1月1號好,那我們試試看這個結果New Date 2020然後我們的Date是什麼好,我們這邊可以看到他是那個1970的1月1號好了,那其實你要建時間啊你也可以用自傳來建你看這邊Date裡面我們直接塞一個自傳是October 10、2019去年國慶的11點13分然後是台北時間嘛GMT大家知道我們這邊的時區是加8吧知道嗎好,這是去年的因為你用自傳就比較簡單嘛對不對禮拜四然後去2019年的10月10號好的,那我們想要得到當下的時間我們可以用Date點Now我們看一下那你得到這一第一傳數字是什麼這一傳數字是從1970年來的毫秒數OK所以你看它會一直變有沒有它會一直變它就是毫秒一直在跑時間就是一個clock一直在跑然後還有一件很重要的事情是你的clock是不一樣OK大家電腦始終不太一樣好然後你今天呢,你也可以用Date點Pars然後你把這一串文字去然後呢,它就可以把它抓出來這樣好,比如說好它因為是跟原本的時間是它是從那時候開始算所以是零那如果我們今天是比如說二號來講它有八八萬六千四百秒對不對那因為它是毫秒計六千四百千毫秒好不好可以嗎毫秒知道是那個千分之一秒OK嗎好minimini是千分之一OK好,那UTC就是我們可以把它找到就是那是什麼UTC應該是UTC是哪裡是葛林位置嗎應該是這中央時間好,那你這樣的方法呢你去這邊應該是1970年1月1號你這邊輸的應該號碼應該是一樣的它會得到這邊我不是啦就是說它會得到你2020你輸進去然後它是從年嘛所以你就會得到就是跟它的毫秒值的差別好了那你就說老實這這這能用嗎對不對所以要有一些方法這些方法呢就是比如說像我拿到現在的Date就是get4get4get4然後它是一個 function所以我們執行它就2020這看起來好看好然後再來getMonth是9欸是9喔0到11OK所以我們現在是10月可是它的index是9好那日期就沒有這個問題啦就是只有那個Month有這個問題對今天22號吧是嗎對好只有月份有這個問題好然後這個這個它的第一天是星期日然後這樣看起來有沒有日就跟Zero很像好get day然後今天禮拜幾禮拜四的那剛好一樣啊0嘛禮拜日就0禮拜零一二三四五六欸剛好耶所以好設定時間所以你可以把你的時間比如說你現在的時間你可以回到去年你就是說你現在這個date對不對我可以set4year然後我把它比如說我現在我用function我這樣我是什麼我是取值喔這是set喔喔2019好那我的date是不是就會變然後我的dateget4year大家有發現差別嗎一個是set一個是get對不對那我的我的date有沒有變欸get month有沒有變啊我知道我是不是都把它弄壞了我把它弄壞了因為我剛才不小心用到get4year然後set4year然後用一個方形直接跑所以它可能就變標準時間了所以等一下我去set成4year2019然後我這邊我去看現在是10月對所以我如果去改動它的年份比如說我改到去年那我現在時間改只有改年份的話我現在就變2019年那個10月22那當然現在這個改時間不是去改你系統的時間而是改這個變數的日期的時間OK的date好那這邊記得注意喔它這邊多一個空白好不好就是你這個空白要自己要注意就是Copy的時候好那這邊想要跟大家補充有一個東西就是我這邊直接補充好了就有一個東西叫做那這個東西叫做momentjs那這個package很好用喔就是關於時間的一切就是它是一個JavaScript的韓式庫那因為原生的JavaScript就是不好不好用所以有人寫了一個moment那這個還有一個好處是你可以寫出像Facebook一樣的時間的表達法比如說像什麼發文什麼一個小時以前或是一個月以前或是一年前你的時間可以用的是更人性化的這種語言表達方式那它的語法如下這邊不做因為時間關係不做太多介紹那這邊有一個台灣的Chinese欸有沒有你的Local是你可以有不同地區的那個語法比如說你看這是ZHTW就是我們的語言嘛然後呢這邊你可以把它變成這樣禮拜四那當你在做一個網站可能面對的客戶是美國的客戶你就把這個Local改成你把它的多國語多國語言的時間改成然後它就會跑出美國式的時間然後你如果回到在台灣的語言你就可以用台灣的語言然後你如果在新加坡英語的格式可能不一樣或是阿拉伯的時間OK所以你就可以就是在不同的比如說你面向東南亞你可能就需要Cambodian Language的時間你就可以用好的那它有我先把它換為中文好了好了有沒有這裡很酷吧這邊有九年前八年前十六小時前八小時前和十五分鐘前那你如果今天發的一個可能是社群網站或是Instagram clone對不對你可能就會需要這些時間來用那這個package就是可以配合你們學的bootstrap一起來使用好了這是十四之一

影片逐字稿largev2

好,接下來我們看第十四章,時間與計時器好的,那我們來看Date這個物件然後我們在後面會學到就是說你可以用JavaScript等一段時間再執行比如說我想要這東西按一下,等了三秒以後再跑出來或是說我想要每三秒就ㄉㄨㄞㄉㄨㄞ一直跑出來Set interval,就是每幾秒做一次這樣好,首先我們來看十四之一,Date的物件它的宣告方法還有它的方法首先呢,我們要建一個Date就是在這個function,直接去new它其實是一個class,叫出來以後你就會得到目前的時間那這邊講,應該是二月多前,所以這是它的時間好,那在Date呢,它是一個function所以你可以放年、月、日、時、分、秒、毫秒好,如果都沒有填的話,預設是零比如說我們這邊在Date我們填2019年11月25號可是很奇怪的是,它跑出來的是12月那為什麼會這樣勒?因為js的一月是零這真的有點怪怪的它的2019,12月25號是2020的一月二十好,沒關係我們來做做看啦然後我們講說201912月25號那我們去看一下這個new date是怎樣有沒有,真的耶2020年1月所以它2019的意思是說是2020的意思然後,它2019是2019,可是12月是一月,所以要加1然後進2應該是這樣然後這邊大家注意一下喔以電腦來說,這個世界是1970年1月1號才開始的UTC標準時間是1970年1月1號好,那我們試試看這個結果new date 2020然後我們的date是什麼好,我們這邊可以看到它是那個1970的1月1號好了,那其實你要建時間啊你也可以用字串來建你看這邊date裡面我們直接塞一個字串這個字串是October 10,2019去年國慶的11點13分然後它是台北時間嘛GMT大家知道我們這邊的時區是加8吧知道嗎好,這是去年的因為你用字串就比較簡單嘛對不對禮拜四然後2019年的10月10號好了,那我們想要得到當下的時間我們可以用date.now看一下那你得到這一串數字是什麼這一串數字是從1970年來的毫秒數所以你看它會一直變有沒有它會一直變它就是毫秒一直在跑時間就是一個clock一直在跑然後還有一件很重要的事情是每個人的電腦的clock是不一樣的大家電腦的時鐘不太一樣好,然後你今天呢你也可以用date.parse然後你把這一串文字去然後呢,它就可以把它抓出來好,比如說像這一串的話它因為是跟原本的時間是它是從那時候開始算所以是0那如果我們今天是比如說2號來講它有8萬6千4百秒嘛對不對那因為它是毫秒計一天有8萬6千4百千毫秒好不好可以嗎毫秒知道是千分之一秒ok嗎好,minimini是千分之一好那utc就是我們可以把它找到utc應該是utc是哪裡是格林位置嗎中央時間好,那你這樣的方法呢你就這邊應該是1970年1月1號你這邊輸的號碼應該是一樣的它會得到這邊我不是了就是說它會得到你2020你輸進去然後它是從年嘛所以你就會得到它跟它毫秒值的差別好了你會說老師new date這能用嗎對不對所以要有一些方法這些方法呢比如說像我拿到現在的date然後呢我就getforgetfor year然後它是一個function所以我們執行它就2020這看起來好看好然後再來get month是9喔0到11ok所以我們現在是10月可是它的index是9好那日期就沒有這個問題啦就是只有那個month有這個問題了今天22號吧是嗎對,好只有月份有這個問題好然後這個這它的第一天是星期日然後這樣看起來有沒有日就跟zero很像好get day今天禮拜幾禮拜四的剛好一樣0嘛禮拜日就0禮拜0123456剛好耶所以好設定時間所以你可以把你的時間比如說你現在的時間你可以回到去年就是說你現在這個date對不對我可以set for year然後我把它比如說我現在我用function我這樣子我是什麼我是取值這是set喔2019好那我的date是不是就會變然後我的dateget for year大家有發現差別嗎一個是set一個是get對不對那我的我的date有沒有變get month有沒有變我知道我是不是都把它弄壞了我把它弄壞了因為我剛才不小心用到get for year然後用一個function直接跑所以它可能就變標準時間了所以這邊我去set成for year2019好然後我這邊我去看get month現在是10月對所以我如果去改動它的年份比如說我改到去年那我現在時間改只有改年份的話我現在就變2019年那個10月22那當然現在這個改時間不是去改你系統的時間是改這個變數的日期的時間okthe date好然後這邊記得注意喔它這邊多一個空白好不好就是你這個空白要自己要注意就是copy的時候set hours0是半夜12點好那這邊想要跟大家補充有一個東西就是我這邊直接補充好了就有一個東西叫做momentjs那這個package很好用喔就是關於時間的一切就是它是一個Javascript的函式庫那因為原生的Javascript就是不好不好用所以有人寫了一個moment那這個還有一個好處是你可以寫出像facebook一樣的時間的表達法比如說像什麼發文什麼一個小時以前或是一個月以前或是一年前你的時間可以用的是更人性化的這種語言表達方式那它的語法如下這邊不做因為時間關係不做太多介紹那這邊有一個台灣的Chinese欸有沒有你的local是你可以有不同地區的那個語法比如說你看這是ZHTW就是我們的語言嘛然後呢這邊你可以把它變成像禮拜四那當你在做一個網站可能面對的客戶是美國的客戶你就把這個local改成你把它的多國語多國語言的時間改成en然後它就會跑出美國式的時間然後你如果回到在台灣的語言你就可以用台灣的語言然後你如果在新加坡英語的格式可能不一樣或是阿拉伯的時間OK所以你就可以就是在不同的比如說你面向東南亞你可能就需要Cambodian language的時間你就可以用好的那它有我先把它換回中文好了有沒有這裡很酷吧這邊有九年前八年前十六小時前八小時前和十五分鐘前那你如果今天發的一個是可能像社群網站或是Instagram clone你可能就會需要這些時間來用那這個package就是可以配合你們學的bootstrap一起來使用好了這是十四之一謝謝大家拜拜