JS时间格式|极客笔记

JS时间格式

在前端开发中，经常需要处理时间和日期相关的操作，比如获取当前时间、格式化时间、动态更新时间等。JavaScript提供了内置的Date对象来处理时间和日期，同时也提供了一些常用的方法来操作时间格式。

本文将详细介绍JS中常用的时间格式化操作，包括以下内容：

获取当前时间
格式化时间
时间戳转换成时间
动态更新时间显示

让我们逐个进行讨论。

获取当前时间

在JavaScript中，我们可以通过Date对象来获取当前时间。Date对象提供了多种方法来获取不同精度的时间信息，比如年、月、日、时、分、秒等。

const now = new Date();

const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

console.log(` ${year}-$ {month}- ${date}$ {hours}: ${minutes}:$ {seconds}`);

运行以上代码，将输出当前的年月日时分秒，例如：2022-3-4 12:30:45。

格式化时间

在实际开发中，经常需要将时间按照特定格式进行显示，比如 YYYY-MM-DD HH:mm:ss。我们可以使用一些方法来实现时间格式化。

function formatDate(date) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  return ` ${year}-$ {month}- ${day}$ {hours}: ${minutes}:$ {seconds}`;
}

const now = new Date();
const formattedDate = formatDate(now);

console.log(formattedDate);

运行以上代码，将输出当前时间的格式化结果，例如：2022-3-4 12:30:45。

除了手动格式化外，我们也可以使用第三方库如moment.js来简化时间格式化操作。

时间戳转换成时间

在实际开发中，经常遇到时间戳的形式，需要将时间戳转换为可读的时间格式。我们可以使用Date对象的构造函数来实现时间戳转换。

function timestampToTime(timestamp) {
  const date = new Date(timestamp);
  return formatDate(date);
}

const timestamp = 1646425845000; // 时间戳
const time = timestampToTime(timestamp);

console.log(time);

运行以上代码，将输出时间戳对应的时间格式，例如：2022-3-4 12:30:45。

动态更新时间显示

有时候我们需要实现页面上的动态时间显示，比如时钟。我们可以使用setInterval方法来定时更新时间的显示。

function updateClock() {
  const now = new Date();
  const formattedDate = formatDate(now);

  document.getElementById('clock').innerHTML = formattedDate;
}

setInterval(updateClock, 1000); // 每秒更新一次

在HTML中我们需要一个容器来显示动态时间：