Web開發中，經常需要獲取當前的日期和時間，以便于在頁面中顯示或進行相應的操作。JavaScript提供了一些內置的方法，可以方便地獲取當前的日期和時間。

獲取當前日期

要獲取當前的日期，我們可以使用Date對象的getDate()、getMonth()和getFullYear()方法。具體步驟如下：

• 創建一個Date對象，沒有傳入任何參數，即默認為當前時間。
• 使用getDate()方法獲取當前的日期。
• 使用getMonth()方法獲取當前的月份，注意月份是從0開始計數的，所以需要加1。
• 使用getFullYear()方法獲取當前的年份。

下面是一個示例代碼：

var now = new Date();
var day = now.getDate();
var month = now.getMonth() + 1;
var year = now.getFullYear();
console.log("當前日期為：" + year + "-" + month + "-" + day);

運行上述代碼，控制臺將輸出當前日期，例如：當前日期為：2023-10-31。

獲取當前時間

要獲取當前的時間，我們可以使用Date對象的getHours()、getMinutes()和getSeconds()方法。具體步驟如下：

• 創建一個Date對象，沒有傳入任何參數，即默認為當前時間。
• 使用getHours()方法獲取當前的小時數。
• 使用getMinutes()方法獲取當前的分鐘數。
• 使用getSeconds()方法獲取當前的秒數。

下面是一個示例代碼：

var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
console.log("當前時間為：" + hours + ":" + minutes + ":" + seconds);

運行上述代碼，控制臺將輸出當前時間，例如：當前時間為：13:24:21。

獲取當前日期和時間

如果需要同時獲取當前的日期和時間，可以將上述兩個步驟合并。具體步驟如下：

創建一個Date對象，沒有傳入任何參數，即默認為當前時間。

下面是一個示例代碼：

var now = new Date();
var day = now.getDate();
var month = now.getMonth() + 1;
var year = now.getFullYear();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
console.log("當前日期和時間為：" + year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds);

運行上述代碼，控制臺將輸出當前日期和時間，例如：當前日期和時間為：2023-10-31 13:25:13。

總結

通過JavaScript的Date對象，我們可以方便地獲取當前的日期和時間。通過使用getDate()、getMonth()、getFullYear()、getHours()、getMinutes()和getSeconds()方法，可以輕松地獲取所需的日期和時間信息。

ue 示例

在JavaScript或Vue中獲取當前時間并格式化輸出到精確的時分秒，你可以使用Date對象結合字符串拼接或者模板字符串來實現。下面是一個簡單示例，展示了如何在Vue中完成這項任務：

<template>
  <div>
    <p>當前時間：{{ formattedTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formattedTime: ''
    };
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000); // 每秒更新一次
  },
  methods: {
    updateTime() {
      const now = new Date();
      // 使用模板字符串進行格式化
      this.formattedTime = `${now.getFullYear()}-${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(now.getHours())}:${this.padZero(now.getMinutes())}:${this.padZero(now.getSeconds())}`;
    },
    // 輔助函數，用于補零操作
    padZero(num) {
      return num < 10 ? '0' + num : num;
    }
  },
  beforeDestroy() {
    // 清除定時器，避免內存泄漏
    clearInterval(this.timer);
  }
};
</script>

在這個示例中，我們在Vue組件的mounted生命周期鉤子中初始化了一個定時器，每秒鐘調用updateTime方法來更新當前時間，并在組件銷毀前通過beforeDestroy鉤子清理定時器。

updateTime方法中，我們創建了一個新的Date對象來獲取當前時間，然后使用模板字符串和輔助函數padZero來確保月份、日期、小時、分鐘和秒數如果是個位數，則在其前補零，以便格式統一和美觀。

這樣，頁面上就會顯示一個實時更新的當前時間，格式為“年-月-日 時:分:秒”。

Vue3 Composition API 示例

在Vue3中，雖然一些API和寫法有所變化，但獲取和格式化當前時間的基本邏輯與Vue2相似。以下是使用Vue3 Composition API的一個示例：

<template>
  <div>
    <p>當前時間：{{ formattedTime }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const formattedTime = ref('');
let timer = null;

const updateTime = () => {
  const now = new Date();
  formattedTime.value = `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
};

const padZero = (num) => {
  return num < 10 ? '0' + num : num;
};

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000); // 每秒更新一次
});

onBeforeUnmount(() => {
  // 清除定時器
  clearInterval(timer);
});
</script>

在這個Vue3的示例中，我們使用了Composition API來管理狀態和生命周期鉤子。ref用于定義響應式數據formattedTime，而onMounted和onBeforeUnmount分別替代了Vue2中的mounted和beforeDestroy生命周期鉤子。

updateTime函數和padZero輔助函數的功能與Vue2示例相同，用于獲取當前時間并進行格式化處理，以及在數字小于10時前面添加零。

這樣，你就可以在Vue3應用中實現實時更新并格式化顯示當前時間的功能。

TypeScript 公共函數封裝

使用TypeScript可以為你的代碼增加類型安全。下面是如何封裝一個獲取并格式化當前時間的公共函數，這個函數可以在Vue3的項目中作為公共方法使用。

首先，在你的Vue3項目的某個公用文件夾（如src/utils）下創建一個名為dateTimeUtils.ts的文件，并編寫如下代碼：

// src/utils/dateTimeUtils.ts

export function formatCurrentTime(): string {
  const now = new Date();
  return `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
}

function padZero(num: number): string {
  return num < 10 ? '0' + num : num.toString();
}

這個模塊導出了一個formatCurrentTime函數，它返回當前時間的格式化字符串。同時，內部使用了padZero輔助函數來保證數字的格式正確。

然后，在你的Vue3組件中，你可以這樣使用這個公共函數：

// 某個Vue3組件.vue文件

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { formatCurrentTime } from '@/utils/dateTimeUtils'; // 根據你的實際路徑調整

const formattedTime = ref('');

onMounted(() => {
  formattedTime.value = formatCurrentTime();
  setInterval(() => {
    formattedTime.value = formatCurrentTime();
  }, 1000);
});
</script>

<template>
  <div>
    <p>當前時間：{{ formattedTime }}</p>
  </div>
</template>

這里，我們導入了formatCurrentTime函數，并在組件掛載時設置初始值，之后每秒更新一次顯示的時間。注意，為了避免潛在的內存泄漏，如果組件需要銷毀時停止時間更新，你可能還需要在適當的生命周期鉤子中清除定時器，正如之前Vue2和Vue3 Composition API示例中所示。不過，在此示例中為了保持簡潔，省略了該部分代碼。

構建的應用程序的時候都會帶有日期時間組件，無論是資源的創建日期還是活動的時間戳。在本文中，我將分享如何在JavaScript中以各種格式獲取當前日期。

1、JavaScript的Date對象

const date = new Date();

該Date對象包含一個Number，表示從新紀元（即1970年1月1日）起經過的毫秒數。你可以將日期字符串傳遞給Date構造函數以創建指定日期的對象：

const date = new Date('Jul 12 2011');

要獲取當前年份，可以使用對象的getFullYear()方法。getFullYear()方法在Date構造函數中返回指定日期的年份：

const currentYear = date.getFullYear();
console.log(currentYear); //2020

同樣，有一些方法可以獲取當月的當前日期和當前的月份：

const today = date.getDate();
const currentMonth = date.getMonth() + 1;

該getDate()方法返回每月的當前日期（1-31）。使用getMonth()方法返回指定日期的月份，需要注意的一點是，該方法返回0索引值（0-11），其中0表示一月，11表示十二月。因此，加1可以使月份的值標準化。

2、Date now

now()是Date對象的靜態方法。它以毫秒為單位的值返回，該值表示從紀元以來所經過的時間。你可以將now()方法返回的毫秒數傳遞給Date構造函數以實例化新Date對象：

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

3、格式化日期

你可以使用Date對象的方法將日期格式化為多種格式（GMT，ISO等）。該toDateString()方法以我們可讀的格式返回日期：

today.toDateString(); // "Sun Jun 16 2020"

toISOString()返回遵循ISO 8601擴展格式的日期：

today.toISOString(); // "2020-06-16T08:30:00.000Z"

toUTCString()以UTC時區格式返回日期：

today.toUTCString(); // "Sat, 16 Jun 2020 08:30:00 GMT"

toLocaleDateString()以地區區時的格式返回日期：

today.toLocaleDateString(); // "6/16/2020"

4、自定義日期格式器功能

除了上面提到的格式外，你的應用程序可能具有不同的數據格式。它可以是yy/dd/mm或yyyy-dd-mm格式，或者類似的格式。為了解決這個問題，最好創建一個可重用的函數，以便可以在多個項目中使用它。因此，接下來，讓我們創建一個實用程序函數，該函數將以函數參數中指定的格式返回日期：

const today = new Date();
function formatDate(date, format) {
    //
}
formatDate(today, 'mm/dd/yy');

你需要使用參數中傳遞格式字符串中的月份，日期和年份分別替換字符串“ mm”，“ dd”，“ yy”。然后，使用replace()，如下所示的方法：

format.replace('mm', date.getMonth() + 1);

但是，這將導致很多methods連接在一起，并且會讓我們嘗試把函數變得更靈活更適合我們的項目時產生麻煩：

  .replace('yy', date.getFullYear())
  .replace('dd', date.getDate());

然后可以使用正則表達式代替methods來連接methods replace()。首先創建一個對象，該對象將代表子字符串的鍵值對及其各自的值：

const formatMap = {
    mm: date.getMonth() + 1,
    dd: date.getDate(),
    yy: date.getFullYear().toString().slice(-2),
    yyyy: date.getFullYear()
};

接下來，使用正則表達式匹配并替換字符串：

formattedDate = format.replace(/mm|dd|yy|yyy/gi, matched => map[matched]);

完整的功能及代碼如下所示：

function formatDate(date, format) {
    const map = {
        mm: date.getMonth() + 1,
        dd: date.getDate(),
        yy: date.getFullYear().toString().slice(-2),
        yyyy: date.getFullYear()
    }
 
    return format.replace(/mm|dd|yy|yyy/gi, matched => map[matched])
}

你還可以在函數中添加格式化時間戳的功能。

5、最后

你現在對DateJavaScript 中的對象有更好的了解。你也可以使用其他第三方庫（例如datesj和）moment來處理應用程序中的日期。