目录
高质量前端博主，点个关注不迷路🌸🌸🌸！
I. Date对象的基本介绍
首先，我们先了解一下什么是Date对象：
学到这里有些人有点不懂了，什么叫对象？
为了便于大家尽快理解Date对象是什么，我们举一个例子：
<script type="text/javascript">
var date_obj = new Date();
console.log(date_obj);
</script>大家看到代码很短，一共两行，第一行我们创建了一个Date对象，即date_obj，紧接着我们打印到控制台，于是我们看一下控制台输出了什么?
是不是很神奇，我们发现打印出来居然是现在的时刻，于是到这里，我们可以给Date对象一个完整的定义了：
到这里，大家对Date对象有了大致的了解，那么接下来我们就深入地学习一些Date对象常用的方法吧。
II. Date对象的常见用法归类汇总
📖 Date对象的六种创建方法
一共有六种方法可以创建一个Date对象，每一种都有不同的格式，其中第一种是最简单的，就在上面我们已经讲解过了，就是没有任何传参的方式，接下来我们看一下剩下的五种方法：
我们逐一解释：
1️⃣ 第一种和第二种方法，创建Date对象的方式都是传入一个字符串作为参数，这个字符串的格式必须按照上面的说明来，否则会出错，我们分别举例：
<script type="text/javascript">
var date_obj1 = new Date("April 10,2022 19:19:35");
console.log(date_obj1)
var date_obj2 = new Date("April 10 2022");
console.log(date_obj2)
</script>可以看出，第一种和第二种方法，月份要传入它的英文名称，大家要好好学英语！然后上面的部分运行后是这样的：
至于为什么第二个时间是00点，那是因为我们没有传入具体的时间，所以生成了默认的时间。
2️⃣ 第三种和第四种方法，创建Date对象的方式都是传入int整形数字作为参数，整型数字的格式必须按照上面的说明来，否则会出错，我们分别举例：
<script type="text/javascript">
var date_obj1 = new Date("April 10,2022 19:19:35");
console.log(date_obj1)
var date_obj2 = new Date("April 10 2022");
console.log(date_obj2)
var date_obj3 = new Date(2022,4,10,19,19,40);
console.log(date_obj3)
var date_obj4 = new Date(2022,4,10);
console.log(date_obj4)
</script>没有删除之前的两种方法，方便大家对比学习。在整型数字创建的过程中，不涉及英文，而是纯阿拉伯数字，大家就没那么困难了，下面是运行的效果：
3️⃣ 最后是第五种方法，参数表示的是需要创建的时间和GMT时间1970年1月1日08:00之间相差的毫秒数，因此这种方法我们了解即可，比如我举个例子：
<script type="text/javascript">
var date_obj1 = new Date("April 10,2022 19:19:35");
console.log(date_obj1)
var date_obj2 = new Date("April 10 2022");
console.log(date_obj2)
var date_obj3 = new Date(2022, 4, 10, 19, 19, 40);
console.log(date_obj3)
var date_obj4 = new Date(2022, 4, 10);
console.log(date_obj4)
var date_obj5 = new Date(86400000);
console.log(date_obj5)
</script>最后一种方法，我传入了这个数字：
大家如果换算一下就会发现，86400000 ms 刚好是一天，那么我们看看实际上是不是这样呢：
经过检验，果然是这样，它从1号变成了2号，这是最后一种创建的方法，大家了解即可！
📖 常见的Date方法
| 方法 | 描述 |
|---|---|
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
| getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 |
| getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 |
| getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 |
| getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 |
| getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 |
| getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 |
| getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 |
| getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 |
| getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 |
| parse() | 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。 |
| setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
| setFullYear() | 设置 Date 对象中的年份（四位数字）。 |
| setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
| setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
| setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
| setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
| setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
| setTime() | setTime() 方法以毫秒设置 Date 对象。 |
| setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 |
| setUTCFullYear() | 根据世界时设置 Date 对象中的年份（四位数字）。 |
| setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 |
| setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 |
| setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 |
| setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 |
| setUTCSeconds() | setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。 |
| setYear() | 已废弃。请使用 setFullYear() 方法代替。 |
| toDateString() | 把 Date 对象的日期部分转换为字符串。 |
| toGMTString() | 已废弃。请使用 toUTCString() 方法代替。 |
| toISOString() | 使用 ISO 标准返回字符串的日期格式。 |
| toJSON() | 以 JSON 数据格式返回日期字符串。 |
| toLocaleDateString() | 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 |
| toLocaleTimeString() | 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 |
| toLocaleString() | 根据本地时间格式，把 Date 对象转换为字符串。 |
| toString() | 把 Date 对象转换为字符串。 |
| toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
以上的这些方法，大家收藏起来，用的时候去找就好，不需要刻意的记住它们。
📖 Date对象的小案例：实现一个钟表
最后，我们学习了这么多东西后，做一个小案例来巩固一下，需求是这样的：
于是，我们的代码应该这么写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>钟表</title>
<script>
function startTimer() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
t = setTimeout(function () {
startTimer()
}, 800);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
</script>
</head>
<body onload="startTimer()">
<div id="time" style="text-align: center;margin-top: 100px;font-size: 50px;"></div>
</body>
</html>这个案例难度很小，大家应该在学习的基础上，主动尝试自己写一遍，加深理解！
下面是案例运行效果：
另外本期博客参与了【新星计划】，还请大家支持一下🌟🌟🌟！
