JavaScript 日期时间操作详解|极客笔记

JavaScript 日期时间操作详解

概述

JavaScript 是一种广泛应用于网页开发的脚本语言，它支持对日期和时间进行操作和处理。本文将详细介绍 JavaScript 中的日期时间操作，包括日期对象、常用的日期时间方法、日期格式化等内容。

日期对象

在 JavaScript 中，可以使用 Date 对象来表示日期和时间。使用 new Date() 构造函数来创建一个日期对象，如果不传递参数，则会获取当前系统时间。

示例代码：

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

输出：

Tue Nov 09 2021 14:21:36 GMT+0800 (China Standard Time)

在 Date 构造函数中，还可以传递参数来指定特定的日期和时间。参数可以是表示日期和时间的字符串，也可以是表示年、月、日等的整数。

示例代码：

let date1 = new Date('2021/11/01');
console.log(date1);

let date2 = new Date(2021, 10, 1);
console.log(date2);

输出：

Mon Nov 01 2021 00:00:00 GMT+0800 (China Standard Time)
Tue Nov 01 2021 00:00:00 GMT+0800 (China Standard Time)

日期时间方法

JavaScript 中的日期对象提供了一系列常用的方法，用于对日期和时间进行操作和计算。下面介绍几个常用的日期时间方法。

获取年、月、日、小时、分钟、秒

日期对象的 getFullYear() 方法用于获取年份，getMonth() 方法用于获取月份（返回值从 0 开始，0 表示一月），getDate() 方法用于获取日期，getHours() 方法用于获取小时（24 小时制），getMinutes() 方法用于获取分钟，getSeconds() 方法用于获取秒数。

示例代码：

let currentDate = new Date();
console.log(currentDate.getFullYear()); // 2021
console.log(currentDate.getMonth());    // 10
console.log(currentDate.getDate());     // 9
console.log(currentDate.getHours());    // 14
console.log(currentDate.getMinutes());  // 21
console.log(currentDate.getSeconds());  // 36

设置年、月、日、小时、分钟、秒

日期对象的 setFullYear() 方法用于设置年份，setMonth() 方法用于设置月份（传入的月份从 0 开始，0 表示一月），setDate() 方法用于设置日期，setHours() 方法用于设置小时（24 小时制），setMinutes() 方法用于设置分钟，setSeconds() 方法用于设置秒数。

示例代码：

let currentDate = new Date();
currentDate.setFullYear(2022);
currentDate.setMonth(0);
currentDate.setDate(1);
currentDate.setHours(0);
currentDate.setMinutes(0);
currentDate.setSeconds(0);

console.log(currentDate);

输出：

Sat Jan 01 2022 00:00:00 GMT+0800 (China Standard Time)

计算时间差

可以使用日期对象的 getTime() 方法获取从 1970 年 1 月 1 日至今的毫秒数，通过计算两个日期对象的时间差来实现日期和时间的计算。

示例代码：

let date1 = new Date('2021/11/01');
let date2 = new Date('2021/12/01');
let timeDiff = date2.getTime() - date1.getTime();

console.log(timeDiff);  // 2592000000 毫秒

格式化日期时间

JavaScript 中没有内置的日期时间格式化函数，但可以使用自定义函数进行格式化。下面是一个简单的日期时间格式化函数的示例：

function formatDate(date) {
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();

  return ` ${year}-$ {month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
}

let currentDate = new Date();
console.log(formatDate(currentDate));  // 2021-11-09

综合应用

下面通过一个小示例，展示 JavaScript 日期时间操作的综合应用。假设有一个网页上显示当前时间，并每秒更新一次。

HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <title>实时显示当前时间</title>
</head>
<body>
  <h1 id="currentTime"></h1>

  <script>
    function getCurrentTime() {
      let currentDate = new Date();
      let hours = currentDate.getHours();
      let minutes = currentDate.getMinutes();
      let seconds = currentDate.getSeconds();

      let currentTime = ` ${hours<10 ? '0' + hours : hours}:$ {minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
      document.getElementById('currentTime').textContent = currentTime;
    }

    getCurrentTime();
    setInterval(getCurrentTime, 1000);
  </script>
</body>
</html>

在上述代码中，通过 setInterval 函数每秒调用一次 getCurrentTime 函数，实现实时更新当前时间的效果。