正文

JavaScript显示当前日期全攻略：轻松学会获取、格式化日期时间，附实战案例与代码详解

/0 浏览量
0402

JavaScript 是一种广泛使用的编程语言，它可以在网页中创建动态效果。其中一个非常实用的功能就是显示当前日期和时间。本文将带您详细了解如何在 JavaScript 中获取、格式化日期时间，并提供实战案例和代码详解。

获取当前日期和时间

在 JavaScript 中，可以使用 Date 对象来获取当前日期和时间。以下是一个简单的示例：

var currentDate = new Date();
console.log(currentDate);

这段代码会创建一个新的 Date 对象，表示当前日期和时间，并将其打印到控制台。

格式化日期和时间

获取到当前日期和时间后，你可能需要将其格式化为特定的格式，例如 “YYYY-MM-DD HH:mm:ss”。以下是一些常用的方法：

使用 toLocaleString 方法

toLocaleString 方法可以用于将日期时间格式化为本地化的字符串。以下是一个示例：

var currentDate = new Date();
console.log(currentDate.toLocaleString());

默认情况下，这个方法会根据浏览器的语言设置来格式化日期和时间。如果你想指定特定的格式，可以使用 options 参数：

var currentDate = new Date();
console.log(currentDate.toLocaleString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }));

使用 padStart 和 padEnd 方法

如果你想将日期时间中的某些部分填充为特定的长度，可以使用 padStart 和 padEnd 方法。以下是一个示例：

var currentDate = new Date();
console.log(currentDate.getFullYear().toString().padStart(4, '0'));
console.log(currentDate.getMonth().toString().padStart(2, '0'));
console.log(currentDate.getDate().toString().padStart(2, '0'));

使用自定义函数

除了上述方法，你还可以创建自定义函数来格式化日期时间。以下是一个示例：

function formatDateTime(date) {
  var year = date.getFullYear();
  var month = date.getMonth() + 1; // 月份是从0开始的
  var day = date.getDate();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();

  month = month.toString().padStart(2, '0');
  day = day.toString().padStart(2, '0');
  hours = hours.toString().padStart(2, '0');
  minutes = minutes.toString().padStart(2, '0');
  seconds = seconds.toString().padStart(2, '0');

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

var currentDate = new Date();
console.log(formatDateTime(currentDate));

实战案例

以下是一个简单的 HTML 页面，它使用 JavaScript 来显示当前日期和时间：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>当前日期和时间</title>
  <script>
    function showDateTime() {
      var currentDate = new Date();
      var formattedDate = formatDateTime(currentDate);
      document.getElementById('datetime').textContent = formattedDate;
    }

    function formatDateTime(date) {
      var year = date.getFullYear();
      var month = date.getMonth() + 1; // 月份是从0开始的
      var day = date.getDate();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();

      month = month.toString().padStart(2, '0');
      day = day.toString().padStart(2, '0');
      hours = hours.toString().padStart(2, '0');
      minutes = minutes.toString().padStart(2, '0');
      seconds = seconds.toString().padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  </script>
</head>
<body>
  <h1>当前日期和时间</h1>
  <p id="datetime"></p>
  <button onclick="showDateTime()">显示当前日期和时间</button>
</body>
</html>

在这个例子中，我们创建了一个按钮，当用户点击这个按钮时，它会调用 showDateTime 函数来显示当前日期和时间。我们使用了前面介绍的自定义函数 formatDateTime 来格式化日期时间。

通过学习本文，你现在应该能够轻松地在 JavaScript 中获取、格式化日期时间，并将其应用于实际项目中。希望这篇文章对你有所帮助！

-- 展开阅读全文 --