JS中Date（日期）对象（秒懂Date用法-菜鸟教程）

目录

一、Date介绍

1.概念

2.创建对象

 3.对象属性

 4.对象方法

 二、Date使用

三、Date方法实例

1.简单获取时间展现在网页中

2.实时时钟

3.计算时间间隔

四、Date应用场景

五、总结

一、Date介绍

1.概念

在JavaScript中，Date对象用于处理日期和时间。它允许你创建日期对象，以便执行日期和时间的操作，如获取当前日期和时间、设置特定日期、获取日期的各个部分（年、月、日、小时、分钟、秒等），以及进行日期比较和计算等。

2.创建对象

可以使用以下四种方法创建：

var d = new Date();
var d = new Date(milliseconds); // 参数为毫秒
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

• milliseconds 参数是一个 Unix 时间戳（Unix Time Stamp），它是一个整数值，表示自 1970 年 1 月 1 日 00:00:00 UTC（the Unix epoch）以来的毫秒数。

• dateString 参数表示日期的字符串值。

• year, month, day, hours, minutes, seconds, milliseconds 分别表示年、月、日、时、分、秒、毫秒。

 3.对象属性

 4.对象方法

var today = new Date();
var UTCstring = today.toUTCString();

 二、Date使用

以下是Date方法的逐一示例：

// 示例11：getUTCDate()
var utcDayOfMonth = today.getUTCDate(); // 返回世界时下当天是本月的第几天
console.log("世界时下今天是本月的第 " + utcDayOfMonth + " 天。");

// 示例12：getUTCDay()
var utcDayOfWeek = today.getUTCDay(); // 返回世界时下当天是一周中的第几天 (0 ~ 6，分别对应周日到周六)
console.log("世界时下今天是本周的第 " + (utcDayOfWeek + 1) + " 天。");

// 示例13：getUTCFullYear()
var utcYear = today.getUTCFullYear(); // 返回世界时下当前年份
console.log("世界时下今年是 " + utcYear + " 年。");

// 示例14：getUTCHours()
var utcHour = today.getUTCHours(); // 返回世界时下当前小时数 (0 ~ 23)
console.log("世界时下当前时间是 " + utcHour + " 点。");

// 示例15：getUTCMilliseconds()
var utcMilliseconds = today.getUTCMilliseconds(); // 返回世界时下当前毫秒数 (0 ~ 999)
console.log("世界时下当前毫秒数是 " + utcMilliseconds + " 毫秒。");

// 示例16：getUTCMinutes()
var utcMinutes = today.getUTCMinutes(); // 返回世界时下当前分钟数 (0 ~ 59)
console.log("世界时下当前分钟数是 " + utcMinutes + " 分钟。");

// 示例17：getUTCMonth()
var utcMonth = today.getUTCMonth(); // 返回世界时下当前月份 (0 ~ 11)
console.log("世界时下当前月份是 " + (utcMonth + 1) + " 月。");

// 示例18：getUTCSeconds()
var utcSeconds = today.getUTCSeconds(); // 返回世界时下当前秒数 (0 ~ 59)
console.log("世界时下当前秒数是 " + utcSeconds + " 秒。");

// 示例19：getYear() - 废弃，不推荐使用
var deprecatedYear = today.getYear(); // 返回当前年份的后两位数，已废弃，请使用 getFullYear() 方法
console.log("废弃方法：当前年份的后两位数为 " + deprecatedYear + "。");

// 示例20：parse()
var dateStr = "2024-04-11T12:00:00Z";
var parsedDate = Date.parse(dateStr); // 返回指定日期字符串的毫秒数
console.log("解析后的日期毫秒数为 " + parsedDate + " 毫秒。");

// 示例21：setDate()
today.setDate(20); // 设置日期为本月的第20天
console.log("设置后的日期为 " + today);

// 示例22：setFullYear()
today.setFullYear(2025); // 设置年份为 2025 年
console.log("设置后的年份为 " + today.getFullYear());

// 示例23：setHours()
today.setHours(15); // 设置小时为 15 点
console.log("设置后的小时为 " + today.getHours() + " 点。");

// 示例24：setMilliseconds()
today.setMilliseconds(500); // 设置毫秒为 500 毫秒
console.log("设置后的毫秒数为 " + today.getMilliseconds() + " 毫秒。");

// 示例25：setMinutes()
today.setMinutes(30); // 设置分钟为 30 分钟
console.log("设置后的分钟数为 " + today.getMinutes() + " 分钟。");

// 示例26：setMonth()
today.setMonth(6); // 设置月份为 7 月 (注意：月份是从 0 开始计数的)
console.log("设置后的月份为 " + (today.getMonth() + 1) + " 月。");

// 示例27：setSeconds()
today.setSeconds(45); // 设置秒数为 45 秒
console.log("设置后的秒数为 " + today.getSeconds() + " 秒。");

// 示例28：setTime()
var newTime = 1648822800000; // 2022 年 3 月 31 日 12:00:00 的毫秒数
today.setTime(newTime); // 设置日期为指定的毫秒数表示的时间
console.log("设置后的日期为 " + today);

// 示例29：setUTCDate()
today.setUTCDate(15); // 根据世界时设置日期为本月的第 15 天
console.log("世界时下设置后的日期为 " + today);

// 示例30：setUTCFullYear()
today.setUTCFullYear(2023); // 根据世界时设置年份为 2023 年
console.log("世界时下设置后的年份为 " + today.getUTCFullYear());

// 示例31：setUTCHours()
today.setUTCHours(8); // 根据世界时设置小时为 8 点
console.log("世界时下设置后的小时为 " + today.getUTCHours() + " 点。");

// 示例32：setUTCMilliseconds()
today.setUTCMilliseconds(200); // 根据世界时设置毫秒为 200 毫秒
console.log("世界时下设置后的毫秒数为 " + today.getUTCMilliseconds() + " 毫秒。");

// 示例33：setUTCMinutes()
today.setUTCMinutes(45); // 根据世界时设置分钟为 45 分钟
console.log("世界时下设置后的分钟数为 " + today.getUTCMinutes() + " 分钟。");

// 示例34：setUTCMonth()
today.setUTCMonth(8); // 根据世界时设置月份为 9 月 (注意：月份是从 0 开始计数的)
console.log("世界时下设置后的月份为 " + (today.getUTCMonth() + 1) + " 月。");

// 示例35：setUTCSeconds()
today.setUTCSeconds(20); // 根据世界时设置秒数为 20 秒
console.log("世界时下设置后的秒数为 " + today.getUTCSeconds() + " 秒。");

// 示例36：toDateString()
var dateOnlyStr = today.toDateString(); // 将日期部分转换为字符串
console.log("日期部分转换后的字符串为 " + dateOnlyStr);

// 示例37：toGMTString() - 已废弃，不推荐使用
var gmtString = today.toGMTString(); // 返回格林威治标准时间的字符串表示，已废弃，请使用 toUTCString() 方法
console.log("废弃方法：格林威治标准时间字符串为 " + gmtString);

// 示例38：toISOString()
var isoString = today.toISOString(); // 返回 ISO 标准格式的日期字符串
console.log("ISO 格式的日期字符串为 " + isoString);

// 示例39：toJSON()
var jsonString = today.toJSON(); // 返回 JSON 数据格式的日期字符串
console.log("JSON 格式的日期字符串为 " + jsonString);

// 示例40：toLocaleDateString()
var localDateString = today.toLocaleDateString(); // 返回根据本地时间格式转换的日期部分字符串
console.log("本地日期字符串为 " + localDateString);

// 示例41：toLocaleTimeString()
var localTimeString = today.toLocaleTimeString(); // 返回根据本地时间格式转换的时间部分字符串
console.log("本地时间字符串为 " + localTimeString);

// 示例42：toLocaleString()
var localString = today.toLocaleString(); // 返回根据本地时间格式转换的完整日期和时间字符串
console.log("本地日期时间字符串为 " + localString);

// 示例43：toString()
var dateString = today.toString(); // 返回日期对象的字符串表示
console.log("日期对象的字符串表示为 " + dateString);

// 示例44：toTimeString()
var timeString = today.toTimeString(); // 返回时间部分的字符串表示
console.log("时间部分的字符串表示为 " + timeString);

// 示例45：toUTCString()
var utcString = today.toUTCString(); // 返回世界时下的字符串表示
console.log("世界时下的字符串表示为 " + utcString);

// 示例46：UTC()
var utcMillisecondsSinceEpoch = Date.UTC(2024, 3, 11, 12, 0, 0); // 返回指定世界时下的毫秒数
console.log("指定世界时下的毫秒数为 " + utcMillisecondsSinceEpoch);

// 示例47：valueOf()
var originalValue = today.valueOf(); // 返回日期对象的原始值
console.log("日期对象的原始值为 " + originalValue);

三、Date方法实例

1.简单获取时间展现在网页中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>当前日期示例</title>
</head>
<body>

<h1>当前日期</h1>

<div id="currentDate"></div>

<script>
// 创建一个Date对象，表示当前时间
var today = new Date();

// 获取当前年份、月份和日期
var year = today.getFullYear();
var month = today.getMonth() + 1; // 月份是从0开始计数的，所以需要加1
var day = today.getDate();

// 格式化月份和日期，使它们保持两位数
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;

// 构建当前日期的字符串表示
var currentDate = year + '-' + month + '-' + day;

// 将当前日期显示在网页上
document.getElementById('currentDate').innerText = "今天是：" + currentDate;
</script>

</body>
</html>

2.实时时钟

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时时钟</title>
<style>
  #clock {
    font-size: 48px;
    text-align: center;
    margin-top: 50px;
  }
</style>
</head>
<body>

<h1>实时时钟</h1>

<div id="clock"></div>

<script>
function updateClock() {
  // 创建一个Date对象，表示当前时间
  var today = new Date();
  
  // 获取当前小时、分钟和秒数
  var hour = today.getHours();
  var minutes = today.getMinutes();
  var seconds = today.getSeconds();
  
  // 格式化小时、分钟和秒数，使它们保持两位数
  hour = hour < 10 ? '0' + hour : hour;
  minutes = minutes < 10 ? '0' + minutes : minutes;
  seconds = seconds < 10 ? '0' + seconds : seconds;
  
  // 构建当前时间的字符串表示
  var currentTime = hour + ':' + minutes + ':' + seconds;
  
  // 将当前时间显示在网页上
  document.getElementById('clock').innerText = currentTime;
}

// 初次加载页面时先更新一次时钟
updateClock();

// 每秒钟更新一次时钟
setInterval(updateClock, 1000);
</script>

</body>
</html>

3.计算时间间隔

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日期间隔计算器</title>
</head>
<body>

<h1>日期间隔计算器</h1>

<form id="dateForm">
  <label for="startDate">起始日期：</label>
  <input type="date" id="startDate" name="startDate"><br><br>
  
  <label for="endDate">结束日期：</label>
  <input type="date" id="endDate" name="endDate"><br><br>
  
  <button type="button" onclick="calculateDateInterval()">计算间隔</button>
</form>

<div id="result" style="margin-top: 20px;"></div>

<script>
function calculateDateInterval() {
  // 获取用户输入的起始日期和结束日期
  var startDateString = document.getElementById('startDate').value;
  var endDateString = document.getElementById('endDate').value;
  
  // 将输入的日期字符串转换为Date对象
  var startDate = new Date(startDateString);
  var endDate = new Date(endDateString);
  
  // 计算两个日期之间的毫秒数差值
  var timeDifference = endDate.getTime() - startDate.getTime();
  
  // 计算天数、小时数、分钟数和秒数
  var days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
  var hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
  
  // 构建结果字符串
  var resultString = "日期间隔为：" + days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒";
  
  // 将结果显示在页面上
  document.getElementById('result').innerText = resultString;
}
</script>

</body>
</html>

四、Date应用场景

1. 时钟和计时器： 可以使用Date对象来创建动态的时钟和计时器，如上面提到的动态时钟示例。通过获取当前时间并根据时间更新页面上的元素，可以实现时钟和计时器的效果。

2. 日期选择器： 在表单中，可以使用Date对象来创建日期选择器，让用户方便地选择日期。HTML5中提供了<input type="date">来实现原生的日期选择器，也可以通过JavaScript来自定义日期选择器的外观和功能。

3. 日期格式化和解析： 可以使用Date对象的方法来格式化日期和解析日期字符串。这在需要在不同的地方显示日期或者从用户输入中获取日期时非常有用。

4. 计算日期间隔： 可以使用Date对象来计算两个日期之间的时间间隔，比如计算两个事件发生的天数、小时数、分钟数等。

5. 定时任务： 可以使用Date对象和setTimeout()或setInterval()函数来执行定时任务，比如定时发送请求、定时更新页面内容等。

6. 日历应用： 在开发日历应用时，Date对象可以用来管理和显示日期，以及处理用户的操作，比如添加事件、查看日程等功能。

7. 时间戳转换： 可以使用Date对象将时间戳转换为具体的日期和时间，或者将日期和时间转换为时间戳。这在处理时间相关的数据时非常有用。

五、总结

Date对象是JavaScript中用于处理日期和时间的内置对象之一。它提供了许多方法来获取、设置、格式化和操作日期和时间。以下是Date对象的一些关键特点和功能总结：

1. 创建Date对象： 可以使用new关键字和Date构造函数来创建Date对象。如果不传递任何参数，则会创建一个表示当前时间的Date对象。也可以传递年、月、日等参数来创建特定日期的Date对象。

2. 获取日期和时间信息： Date对象提供了一系列方法来获取日期和时间的各个部分，包括年、月、日、时、分、秒、毫秒等。

3. 设置日期和时间信息： 除了获取日期和时间信息外，还可以使用相应的方法来设置日期和时间的各个部分，从而修改Date对象表示的时间。

4. 格式化日期和时间： Date对象提供了几种不同的方法来将日期和时间格式化为字符串，以便显示给用户或者保存到数据库中。

5. 日期运算： 可以使用Date对象进行日期运算，比如计算日期间隔、比较两个日期的大小等。

6. 时区和跨时区操作： Date对象可以自动处理时区差异，并且提供了一些方法来进行时区转换和跨时区操作。

7. 计时器和定时任务： 可以使用Date对象和setTimeout()、setInterval()等函数来执行定时任务，比如定时发送请求、定时更新页面内容等。

8. 时间戳处理： Date对象可以将日期转换为时间戳（表示从1970年1月1日午夜起至特定日期的毫秒数），也可以将时间戳转换为日期。

总的来说，Date对象是JavaScript中用于处理日期和时间的核心工具，它在Web开发中扮演着重要的角色，涵盖了许多与日期和时间相关的功能和应用场景。