JavaScript的Date对象格式化 js中date对象

目录

I. Date对象的基本介绍

II. Date对象的常见用法归类汇总

📖 Date对象的六种创建方法

📖 常见的Date方法

📖 Date对象的小案例：实现一个钟表

---

I. Date对象的基本介绍

首先，我们先了解一下什么是Date对象：

Date对象，又叫日期对象，是JavaScript总用于处理日期和时间的一种对象。

学到这里有些人有点不懂了，什么叫对象？

其实对象就是类的实例化而已，后面会出一期关于JavaScript面向对象的博客，大家暂时先理解成：

对象就是具有一些方法和属性的一个变量。

为了便于大家尽快理解Date对象是什么，我们举一个例子：

<script type="text/javascript">
    var date_obj = new Date();
    console.log(date_obj);
</script>

大家看到代码很短，一共两行，第一行我们创建了一个Date对象，即date_obj，紧接着我们打印到控制台，于是我们看一下控制台输出了什么?

是不是很神奇，我们发现打印出来居然是现在的时刻，于是到这里，我们可以给Date对象一个完整的定义了：

Date对象是一个关于时间的变量，它具有很多关于时间的属性和方法，当我们打印它，显示的是当前时间信息，包括 周、月、日、年、几时几分和时区。

到这里，大家对Date对象有了大致的了解，那么接下来我们就深入地学习一些Date对象常用的方法吧。

---

II. Date对象的常见用法归类汇总

📖 Date对象的六种创建方法

一共有六种方法可以创建一个Date对象，每一种都有不同的格式，其中第一种是最简单的，就在上面我们已经讲解过了，就是没有任何传参的方式，接下来我们看一下剩下的五种方法：

(1) var date_obj = new Date("month dd,yyyy hh:mm:ss");

(2) var date_obj = new Date("month dd,yyyy")

(3) var date_obj = new Date(yyyy,mth,dd,hh,mm,ss);

(4) var date_obj = new Date(yyyy,mth,dd);

(5) var date_obj = new Date(ms);

我们逐一解释：

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

大家如果换算一下就会发现，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对象的小案例：实现一个钟表

最后，我们学习了这么多东西后，做一个小案例来巩固一下，需求是这样的：

做一个显示当前的 时：分：秒 的钟表，呈现在HTML上

于是，我们的代码应该这么写：

<!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>

这个案例难度很小，大家应该在学习的基础上，主动尝试自己写一遍，加深理解！

下面是案例运行效果：