JS-13: Date全解析

更新於 發佈於 閱讀時間約 4 分鐘

本章節你將了解 日期物件,包括處理日期的方法以及如何設定日期格式。

Date 物件是 JS 中的內置對象,可用於處理日期和時間,以下是如何創建它的語法:

const now = new Date();
  • new關鍵字用於創建 Date 的新實例

現在你可以將其輸出到主控台。

const now = new Date();
console.log(now);

輸出:

raw-image

我們可以獲取更細部的資訊:

const now = new Date();
console.log(now);

const year = now.getFullYear();
console.log(year);

const month = now.getMonth(); // 0-11,0 表示 1 月
console.log(month + 1); // 轉為 1-12

const date = now.getDate(); // 當月中的第幾天
console.log(date);

const day = now.getDay(); // 0 表示星期日,6 表示星期六
console.log(day);

const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
console.log(`${hours}:${minutes}:${seconds}`);
raw-image

我們也可以提供日期和時間當作參數,格式化日期物件。

const specificDate = new Date("July 4, 1776 12:00:00")
console.log(specificDate)

輸出:

raw-image

另外,Date.now() 回傳自 1970/01/01 00:00:00 UTC 起經過的毫秒數,以下示範:

const timeElapsed = Date.now();
const today = new Date(timeElapsed);
console.log(timeElapsed);
console.log(today);

輸出:

raw-image

好,接下來介紹格式化日期的不同方法。以下示範:

const now = new Date();
console.log(now.toISOString()); // 台灣是 UTC+8 時區,所以12:38:59(UTC) + 8 小時 = 20:38:59(當地時間)。
console.log(now.toLocaleDateString('zh-TW')); // 參數可選
console.log(now.toLocaleTimeString('zh-TW')); // 參數可選
console.log(now.toDateString());
console.log(now.toTimeString());

輸出:

raw-image

好,最後,我們可以計算兩個日期的差異,這常見於部落格的文章中,通常有些網站會標記文章距離發布至今過了幾天。

const specificDate = new Date("January 31, 2025 12:00:00")
const now = new Date();

console.log(specificDate);
console.log(now);
const diff = specificDate - now; // 毫秒數
const days = Math.floor(diff / (1000 * 60 * 60 * 24)); //計算完整經過的天數,忽略未滿一天的部分。
//const days = Math.floor(diff / (1000 * 60 * 60 * 24)); //哪怕只有部分天數經過,也應該算進整天。用於計算「截止日期」。
console.log(days);

輸出:

raw-image
在當今數位時代,電資領域人才需求爆發式成長,不論是前端網頁設計、嵌入式開發、人工智慧、物聯網還是軟硬體整合,這些技術都在改變世界。而掌握 C/C++、Python、數位邏輯、電路學與嵌入式開發等大學電資領域的課程,正是進入這個高薪、高需求產業的關鍵!
留言
avatar-img
留言分享你的想法!

































































表單驗證是一個在用戶輸入資料時確保其正確性、完整性及格式符合要求的重要功能,它可以在用戶提交表單之前進行檢查,防止錯誤資料的傳輸。本章節將帶你初步了解其原理與使用。
本篇文章深入淺出地介紹 JavaScript 正規表達式,從基本語法、常用符號、方法應用到進階的捕獲群組、斷言等,並搭配豐富的範例程式碼,幫助讀者快速掌握正規表達式的使用技巧。
了解常見的錯誤消息將幫助您更有效的調試程式碼,本章將介紹 JavaScript 錯誤處理機制 (Error Handling),學習如何有效地偵測、處理與預防錯誤,提高程式的穩定性與可維護性。
透過本章的學習,你將了解 JavaScript 事件冒泡 (Event Bubbling) 與事件委託 (Event Delegation),這是前端開發中處理 DOM 事件的重要概念。
本篇文章介紹 JS 中DOM的基本操作,包含節點類型、節點關係、以及常見的 DOM API 使用方法。文中也說明 `innerText` 與 `textContent` 的差異,並示範了 `addEventListener()` 的其他事件類型。是一篇實作類型的教學文章,意在幫你輕鬆入門這項技術。
本章將深入探討 JS中高階函式 (Higher-Order Functions) 與回呼函式 (Callback Functions),這是 函數式程式設計的核心概念。透過學習高階函式的應用,如 map()、filter()等,以及回呼函式的使用,你將能夠寫出更簡潔、可讀性更高且可重複使用的程式碼。
表單驗證是一個在用戶輸入資料時確保其正確性、完整性及格式符合要求的重要功能,它可以在用戶提交表單之前進行檢查,防止錯誤資料的傳輸。本章節將帶你初步了解其原理與使用。
本篇文章深入淺出地介紹 JavaScript 正規表達式,從基本語法、常用符號、方法應用到進階的捕獲群組、斷言等,並搭配豐富的範例程式碼,幫助讀者快速掌握正規表達式的使用技巧。
了解常見的錯誤消息將幫助您更有效的調試程式碼,本章將介紹 JavaScript 錯誤處理機制 (Error Handling),學習如何有效地偵測、處理與預防錯誤,提高程式的穩定性與可維護性。
透過本章的學習,你將了解 JavaScript 事件冒泡 (Event Bubbling) 與事件委託 (Event Delegation),這是前端開發中處理 DOM 事件的重要概念。
本篇文章介紹 JS 中DOM的基本操作,包含節點類型、節點關係、以及常見的 DOM API 使用方法。文中也說明 `innerText` 與 `textContent` 的差異,並示範了 `addEventListener()` 的其他事件類型。是一篇實作類型的教學文章,意在幫你輕鬆入門這項技術。
本章將深入探討 JS中高階函式 (Higher-Order Functions) 與回呼函式 (Callback Functions),這是 函數式程式設計的核心概念。透過學習高階函式的應用,如 map()、filter()等,以及回呼函式的使用,你將能夠寫出更簡潔、可讀性更高且可重複使用的程式碼。
你可能也想看
Google News 追蹤
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
這些章節的目的是為了介紹JavaScript中的各種數據類型,包括基礎類型和物件類型,以及如何將數據從一種類型轉換為另一種類型。此外,還介紹了如何創建自定義類型,以及如何使用JavaScript中的陣列、集合和字典。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 今天才發現可以不用看著影片一步一步寫,可以自己先寫寫看😛 第二個挑戰是用 JS + CSS 寫一個時鐘,不過其實檔案裡面 HTML 跟 CSS 都已經寫好了,三個指針也都放好了,Go Live 起來就長
※ Javascript和HTML的關係 當我們輸入新的網址或按下重新整理時,從解析檔案到畫面顯示出來,瀏覽器會進行以下流程: 解析 HTML / CSS 檔案,建立物件模型: HTML → DOM (Document Object Model)。 CSS → CSSOM (CSS Obje
※ 函式基礎介紹: ※ JavaScript 特殊的函式特性: 函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法: ※ 調用 (invoke) 函式: "調用" 意指呼叫或執行
前言: 一直想要把自己的學習筆記整理整理,至少在寫下筆記的時候,也能釐清觀念。 結果拖延到現在,終於要提筆了,不知道能堅持多久(???)。
※ 常用Object(物件)型態的方法: 拿到object裡面某個key的value(值): 拿到所有屬性: ※ 存取物件屬性:點記法與括號記法 使用點記法 (dot notation) 或括號記法 (bracket notation) 來存取物件的值,以下兩種寫法的結果是一樣的: //
Thumbnail
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
分享這套功能齊全,視覺超級可愛還有響應式變化,教學文件又很容易閱讀的套件 Evo Calendar。 當初在製作 JS side project 時,想找一個與 VCalendar 視覺相近的套件,但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例,也很
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
這些章節的目的是為了介紹JavaScript中的各種數據類型,包括基礎類型和物件類型,以及如何將數據從一種類型轉換為另一種類型。此外,還介紹了如何創建自定義類型,以及如何使用JavaScript中的陣列、集合和字典。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 今天才發現可以不用看著影片一步一步寫,可以自己先寫寫看😛 第二個挑戰是用 JS + CSS 寫一個時鐘,不過其實檔案裡面 HTML 跟 CSS 都已經寫好了,三個指針也都放好了,Go Live 起來就長
※ Javascript和HTML的關係 當我們輸入新的網址或按下重新整理時,從解析檔案到畫面顯示出來,瀏覽器會進行以下流程: 解析 HTML / CSS 檔案,建立物件模型: HTML → DOM (Document Object Model)。 CSS → CSSOM (CSS Obje
※ 函式基礎介紹: ※ JavaScript 特殊的函式特性: 函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法: ※ 調用 (invoke) 函式: "調用" 意指呼叫或執行
前言: 一直想要把自己的學習筆記整理整理,至少在寫下筆記的時候,也能釐清觀念。 結果拖延到現在,終於要提筆了,不知道能堅持多久(???)。
※ 常用Object(物件)型態的方法: 拿到object裡面某個key的value(值): 拿到所有屬性: ※ 存取物件屬性:點記法與括號記法 使用點記法 (dot notation) 或括號記法 (bracket notation) 來存取物件的值,以下兩種寫法的結果是一樣的: //
Thumbnail
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
分享這套功能齊全,視覺超級可愛還有響應式變化,教學文件又很容易閱讀的套件 Evo Calendar。 當初在製作 JS side project 時,想找一個與 VCalendar 視覺相近的套件,但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例,也很