iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

追求JS小姊姊30天系列 第 10

追求JS小姊姊系列 Day10 -- 如果時間能重來,我不想跟工具人聊天(下)

前情提要

在D特的幫助下,試著穿越時空,但時間碎片湊齊了卻還是出不去,現在該怎辦?

:...所以我們會永遠困在這嗎?
D特:....(沈思樣),我想剛剛會失敗的原因是我們試著憑空要取得一個時間點,但照理應該是要創照出時間,再去進行穿梭。
:不管怎樣,趕快來進行吧


沒有專屬的時間?也能用Date不求人

操作月份 -- Date.prototype.setMonth();

公式: setMonth(monthValue, dateValue)
公式解釋:

  1. monthValue:0-11的整數值,依序代表1-12月
    1. 輸入值符合區間(0-11):回傳對應的毫秒值
    2. 輸入值不符合(ex:15):會自動進位,視為1年又3個月
  2. dateValue:1-31的整數值(不建議略過月份,直接設定日期)

回傳值:
從1970年到輸入值對應的總毫秒值(millionTime),例如輸入1995,就是回傳1995-1970後換算毫秒值。

let rightNow = new Date();
//2021/9/25 13:55  
rightNow.setMonth(11);
//會根據你當下的年份,往前推算(11:代表2021的12月)

Q:當你輸入的值(0-11)超過範圍會怎樣?

let rightNow = new Date();
//2021/9/25 13:55  
rightNow.setMonth(12);
//上面有提過,會根據當下時間往前,所以:
//Tue Jan 25 2022 13:56:05 GMT+0800 (台北標準時間)

操作年份 -- Date.prototype.setFullYear()

公式: setFullYear(yearValue, monthValue, dateValue)
公式解釋:

  1. yearValue:輸入一個整數值,eg:1995 (選擇性)
  2. monthValue:0-11的整數值,依序代表1-12月 (選擇性)
    1. 輸入值符合區間(0-11):回傳對應的毫秒值
    2. 輸入值不符合(ex:15):會自動進位,視為1年又3個月
  3. dateValue:1-31的整數值(不建議略過月份,直接設定日期)(選擇性)

回傳值:
從1970年到輸入值對應的總毫秒值(millionTime),例如輸入1995,就是回傳1995-1970後換算毫秒值
如果沒填monthValue,dateValue會自動以getMonth(),getDate(),也就是根據local time取出時間

操作日期 -- Date.prototype.setDate();

公式: setDate(dayValue)
公式解釋:

  1. dateValue:1-31的整數值(不建議略過月份,直接設定日期)

回傳值:
從1970年到輸入值對應的總毫秒值(millionTime),例如輸入1995,就是回傳1995-1970後換算毫秒值。

Date().setDate(31);

Q:當你輸入的值(1-31)超過範圍會怎樣?

Date().setDate(33);
//根據你本地端當下的月份日期長度,例如現在是9月,共30天
//所以setDate(33) = 33 - 當下月份日期長度

Q:當你輸入的值為負值時會怎樣?

Date().setDate(-1);
//根據你本地端當下的月份的前一個月最後一天開始計算
//以上面的結果為例就會得到8/30 

操作小時 -- Date.prototype.setHours();

公式setHours(hoursValue, minutesValue, secondsValue, msValue)
公式解釋

  1. hoursValue:有效值為0-23
  2. minutesValue:有效值為0-59(選擇性)
  3. secondsValue:有效值為0-59(選擇性)
  4. msValue:有效值為0-999(選擇性)
    上述值共通性:當你輸入超過原本範圍的值都會累加。

回傳值
從1970年到輸入值對應的總毫秒值(millionTime),例如輸入1995,就是回傳1995-1970後換算毫秒值。
沒有輸入的部分同樣會自動透過getMinutes(),getSeconds()

Q:當你輸入的值(0-23)超過範圍會怎樣?

rigthNow.setHours(25);
//根據你本地端當下天數往前累計
//9/25 24+1 = 9/26 1am

Q:當你輸入的值為負值時會怎樣?

rigthNow.setHours(-1);
//根據你本地端當下天數的最後小時開始計算
//9/25 24-1 =23pm


:這樣真的靠譜嗎?跟上次的步驟很像誒...
D特:有道理的擔心,你知道世界上的時間規範不只一種嗎?
為了找出最精確的時間,這次保險起見,要參照哪個規範的時間也來設定一下吧?

你知道嗎? 不只UTC一種標準,簡單認識ISO,GMT的差別

  1. UTC:
    又稱世界協調時間,是世界上最主要的時間標準,最接近於格林威治標準時間,但它沒有包含夏令時間的調整,欲知更多:Coordinated Universal Time
  2. ISO 8601:
    是由**國際標準化組織(ISO)**所奠定對於日期與時間的表示方法,內容包含日曆、日期、當地時間等的規範,欲知更多:ISO 8601
  3. GMT:
    就是上述的格林威治標準時間,由於格林威治平時基於天文觀測本身的缺陷,已經被原子鐘報時的世界協調時間(UTC)所取代。欲知更多:格林威治平均時間

Date.prototype.toUTCString();

公式toUTCString()
回傳值:回傳依據UTC time zone 規範 的 字串型別內容,
分別是:Www, dd Mmm yyyy hh:mm:ss GMT

下圖是對應的內容:

console.log(rightNow.toUTCString());
//Sat, 25 Sep 2021 07:14:11 GMT

D特:有注意到嗎?剛剛我們的執行順序是:
操作月 > 操作年 > 操作日期 > 操作小時
流程錯了,是條件跟流程的問題!
(欲知正確流程:可看追求JS小姊姊系列 Day9 -- 如果時間能重來,我不想跟工具人聊天(上)
:這裡也能業配?!

-- to be continued --


那今天就到這邊摟!今天分享喜歡的歌是:
伍佰 Wu Bai&China Blue【挪威的森林 Norwegian forest】Official Music Video
https://www.youtube.com/watch?v=gPpZJlE0Ca8

每天的休息,是為了後面的追求,明天見。


reference:
  1. MDN
  2. https://pjchender.dev/javascript/js-date-time/
  3. https://medium.com/coding-hot-pot/javascript-date%E7%89%A9%E4%BB%B6-e63d80d8a180

上一篇
追求JS小姊姊系列 Day9 -- 如果時間能重來,我不想跟工具人聊天(上)
下一篇
追求JS小姊姊系列 Day11 -- 流程錯了怎辦?難道要跟D特終老?
系列文
追求JS小姊姊30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言