小白也能看懂的在JavaScript中，如何用Date 对象用于处理日期和时间

失语你

于 2024-08-02 02:29:45 发布

阅读量465

点赞数 11

分类专栏： js 文章标签： javascript 开发语言 ecmascript 学习

本文链接：https://blog.csdn.net/m0_73672948/article/details/140860931

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在JavaScript中，Date 对象用于处理日期和时间：

创建日期对象

无参数构造器：创建一个表示当前日期和时间的Date对象。（实际开发中没有特殊要求，一般常用1创建）

let now = new Date();

2.指定日期和时间**：可以传入一个表示日期的字符串。

let specificDate = new Date("2023-06-20T12:00:00Z");

3.通过时间戳创建**：传入时间戳（毫秒为单位，自1970年1月1日00:00:00 UTC起）。

let timestamp = 1695506400000; // 2023-06-20T12:00:00.000Z
let dateFromTimestamp = new Date(timestamp);

4.使用年、月等参数创建**：传入年、月（0-11，0代表一月）、日等参数。

let customDate = new Date(2023, 5, 20, 12, 0, 0, 0); // 注意月份是从0开始的，所以6月是5

常用Date对象方法

获取日期和时间部分：

- getDate(): 返回月中的某一天（1-31）
- getDay(): 返回一周中的某一天（0-6，0代表周日）
- getMonth(): 返回月份（0-11）
- getFullYear(): 返回四位数的年份
- getHours(): 返回小时（0-23）
- getMinutes(): 返回分钟（0-59）
- getSeconds(): 返回秒数（0-59）
- getMilliseconds(): 返回毫秒数（0-999）
- getTime(): 返回时间戳（自1970年1月1日00:00:00 UTC起的毫秒数）

设置日期和时间：与获取方法相对应，有setDate(), setMonth(), setFullYear(), setHours(), setMinutes(), setSeconds(), setMilliseconds(), 和 setTime() 等方法来设置日期和时间。
其他常用方法：

- toString(): 返回一个表示该日期的字符串
- toLocaleString(): 返回一个表示该日期的本地化字符串
- toLocaleDateString(): 返回一个表示该日期的本地化日期字符串
- toLocaleTimeString(): 返回一个表示该日期的本地化时间字符串
- valueOf(): 返回日期的时间戳，与getTime()相同

示例

let date = new Date();
console.log(date.getFullYear()); // 输出年份，例如：2024
console.log(date.getMonth() + 1); // 输出月份（注意要加1，因为getMonth()返回的月份是从0开始的）
console.log(date.getDate()); // 输出日
console.log(date.getHours()); // 输出小时

注意点

JavaScript中的月份是从0开始的，即0代表一月，11代表十二月。
Date对象在处理日期和时间时，会考虑时区。如果需要更复杂的日期和时间操作，或者需要处理时区问题，可以考虑使用第三方库，如moment.js或date-fns。

案例：

需求:在页面上显示实时时间格式为 xxxx-xx-xx-xx-xx-xx (2024-12-02-12-20-02)

要将时间格式设置为 年月日时分秒，可以使用 JavaScript 的 Date 对象来提取年、月、日、时、分、秒，并以希望的格式组合它们。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Display Date</title>

</head>

<body>
  <!-- 用于显示日期的元素 -->
  <div id="dateDisplay"></div>

  <script>
    // 获取当前日期和时间
    let R = new Date();

    // 提取年、月、日、时、分、秒
    let year = R.getFullYear();
    let month = String(R.getMonth() + 1).padStart(2, '0');  // 月份从0开始，所以需要 +1
    let day = String(R.getDate()).padStart(2, '0');
    let hours = String(R.getHours()).padStart(2, '0');
    let minutes = String(R.getMinutes()).padStart(2, '0');
    let seconds = String(R.getSeconds()).padStart(2, '0');

    // 格式化日期字符串
    let formattedDate = `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`;

    // 获取 HTML 元素
    let dateDisplay = document.getElementById('dateDisplay');
    
    // 将格式化后的日期字符串显示在页面上
    dateDisplay.innerHTML = '当前日期和时间: ' + formattedDate;
  </script>

</body>

</html>

解释：

提取日期和时间部分：

- getFullYear()：获取四位数的年份。
- getMonth()：获取月份，范围是 0-11，因此需要加 1。
- getDate()：获取月份中的日。
- getHours()：获取小时。
- getMinutes()：获取分钟。
- getSeconds()：获取秒。

格式化：

- 使用 String().padStart(2, '0') 确保月份、日、小时、分钟和秒总是以两位数字显示，例如 “09” 而不是 “9”。

拼接字符串：

- 使用模板字符串（反引号 ` `）将提取的日期和时间拼接成你所需要的格式。

这样，你就可以以 年月日时分秒 的格式显示当前日期和时间了。

如果要精益求精

要实现页面不刷新情况下时间实时变化，你可以使用 JavaScript 的 setInterval 函数来定时更新页面上的时间。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Display Date</title>

  <style>
    #dateDisplay {
      font-family: Arial, sans-serif;
      font-size: 1.5em;
      margin: 20px;
    }
  </style>

</head>

<body>
  <!-- 用于显示日期的元素 -->
  <div id="dateDisplay"></div>

  <script>
    // 函数用于格式化日期
    function formatDate(date) {
      let year = date.getFullYear();
      let month = String(date.getMonth() + 1).padStart(2, '0');
      let day = String(date.getDate()).padStart(2, '0');
      let hours = String(date.getHours()).padStart(2, '0');
      let minutes = String(date.getMinutes()).padStart(2, '0');
      let seconds = String(date.getSeconds()).padStart(2, '0');
      
      return `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`;
    }

    // 更新页面上的时间
    function updateDateTime() {
      let R = new Date();
      let formattedDate = formatDate(R);
      let dateDisplay = document.getElementById('dateDisplay');
      dateDisplay.innerHTML = '当前日期和时间: ' + formattedDate;
    }

    // 每秒更新一次时间
    setInterval(updateDateTime, 1000);

    // 初始调用一次以立即显示时间
    updateDateTime();
  </script>

</body>

</html>