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来处理应用程序中的日期。