JS获取当前日期和时间的简单实例

JS获取当前日期和时间的简单实例，可以使用内置的Date对象来实现。

第一步：创建Date对象

要获取当前日期和时间，我们首先需要创建一个Date对象。可以使用以下代码来创建：

let currentDate = new Date();

在上面的代码中，new关键字创建了一个新的Date对象，并将其分配给变量currentDate。这将创建一个包含当前日期和时间的Date对象。

第二步：获取日期和时间组件

我们可以使用Date对象的内置方法来获取不同的日期和时间组件，例如年，月，日，小时，分钟，秒和毫秒。以下是一些常用的Date对象内部方法：

• getFullYear()：获取当前年份
• getMonth()：获取当前月份（0-11）
• getDate()：获取当前日期（1-31）
• getDay()：获取当前星期几（0 for Sunday, 1 for Monday, etc.）
• getHours()：获取当前小时（0-23）
• getMinutes()：获取当前分钟（0-59）
• getSeconds()：获取当前秒钟（0-59）
• getMilliseconds()：获取当前毫秒（0-999）

例如，要获取当前年份，我们可以使用以下代码：

let year = currentDate.getFullYear();

示例1：在网页中显示当前日期和时间

现在，让我们来看一个例子，将当前日期和时间显示在网页上。首先，在HTML中创建一个具有唯一ID的元素用于显示日期和时间，例如：

<p id="date-time"></p>

接下来，使用以下JavaScript代码来获取当前日期和时间，并将其分配给ID为'date-time'的段落元素：

let currentDate = new Date();
let dateTimeElement = document.getElementById("date-time");

// format date and time as a string
let dateTimeString = currentDate.toLocaleString();

// set element's innerHTML to string
dateTimeElement.innerHTML = dateTimeString;

在上面的JavaScript代码中，我们创建了一个Date对象，然后使用toLocalString()方法将其转换为字符串形式，最后将字符串分配给具有ID 'date-time'的段落元素。

示例2：根据日期和时间添加活动

在这个例子中，让我们看看如何根据当前的日期和时间添加活动。首先，创建一个对象数组，其中包含一些活动和它们的日期/时间：

let events = [
  { name: "Meeting with clients", date: new Date('2022-03-14T10:30:00.000Z') },
  { name: "Lunch break", date: new Date('2022-03-14T12:30:00.000Z') },
  { name: "Work on project tasks", date: new Date('2022-03-14T14:00:00.000Z') }
];

在上面的代码中，我们创建了一个包含三个活动及其日期/时间的对象数组。

接下来，我们可以使用以下JavaScript代码来获取当前日期和时间，并将其用作添加活动的依据：

let currentDate = new Date();
let currentTimestamp = currentDate.valueOf();

上面的代码获取当前日期和时间的时间戳，以便我们可以将其用于活动的比较。

现在，我们使用JavaScript的filter()方法，找出当前日期及以后的活动：

let currentEvents = events.filter(event => event.date.valueOf() >= currentTimestamp);

在上面的代码中，我们使用Array的filter()方法过滤出当前日期及以后的活动，并将它们存储在变量currentEvents中。

最后，我们可以使用以下JavaScript代码将当前及以后的活动添加到HTML中：

let eventListElement = document.getElementById("event-list");

currentEvents.forEach(event => {
  let eventElement = document.createElement('li');
  eventElement.innerHTML = event.name + ' at ' + event.date.toLocaleString();
  eventListElement.appendChild(eventElement);
});

在上面的代码中，我们首先获取具有ID 'event-list'的元素，这将用于显示我们找到的活动。然后，我们使用forEach()方法迭代遍历当前及以后的活动，并将它们附加到现有HTML列表中。每个活动都被转换为一个字符串，它包含一个活动的名称和日期/时间。这些字符串被包装在“li”元素中，并被添加到“eventListElement”中。

这就是过程了，以上例子都可以在JavaScript环境下直接运行。