JS：初识Date对象

马黑黑

在JS世界里，Date对象用于处理日期与时间。今天我们只是来瞧瞧Date对象的冰山一角。

要使用 Date 对象，先得创建它，语法如下：

var d = new Date();

以上，我们创建了一个 Date 对象，并授权给了变量 d，随后我们就从变量 d 获取我们所需要的所有信息。语句中，new 是JS保留指令，指新的对象；是什么新的对象？就是 Date 对象，写成 Date() 酱紫。本帖随后的代码，暗红色的文字都是JS内置的方法或函数。

现在，我们从 d 变量中获取各种日期和时间信息：

        var year = d.getFullYear(); //获取年份（getYear已被废弃，所以用 getFullYear）
        var month = d.getMonth() + 1; //获取月份：0~11，所以加 1
        var date = d.getDate(); //获取日期
        var day = d.getDay(); //获取星期几：0~6，0代表星期天
        var hour = d.getHours(); //获取小时数：24小时制
        var minute = d.getMinutes(); //获取分钟
        var second = d.getSeconds(); //获取秒数


至此，我们可以做一个数字时钟了。我们的思路是，在一个 div 盒子里显示上述年月日星期时分秒信息，当然我们要拼接一下这些信息，让它可读性强一些：

year + "年" + month + "月" + date + "日 星期 " + day + " " + hour + ":" + minute + ":" + second

上面的字串拼接，唯一不太理想的是“星期几”的表达，我们暂时采用“星期1”而不是“星期一”，这是为了让示例更简洁，今后我们会处理这个问题，包括年份的显示。

以下是全部代码（效果演示在下楼）：

<div id="txtclock"></div>

<script language="javascript">
showTime();
setInterval(showTime, 1000);

function showTime(){
        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var date = d.getDate();
        var day = d.getDay();
        var hour = d.getHours();
        var minute = d.getMinutes();
        var second = d.getSeconds();
        document.getElementById("txtclock").innerHTML = year + "年" + month + "月" + date + "日 星期 " + day + " " + hour + ":" + minute + ":" + second;
}

</script>

马黑黑

马黑黑

从运行效果看，有诸多细节需要完善，大家先好好领会 Date 对象的基础应用，熟悉了例中的相关信息获取，我们再往下一步，即完善我们的“时钟”——将来，我们真的也可以做一个模拟现实生活中的时钟样式。

红影

获取月份：0~30，所以加 1
月份怎么是0-30？不是12个月的么？

红影

这个好厉害，能直接显示当前时间呢

红影

今天是周五啊，看你这示例里显示的是周六呢。

红影

又是一个好玩的，黑黑真棒

马黑黑

红影 发表于 2022-3-18 19:21
又是一个好玩的，黑黑真棒

这个可不是玩儿的，这是知识点

马黑黑

一楼的示例中，代码

function showTime(){
    //...
}

是一个自定义函数，这个函数创建了 Date 对象，并从对象中分别获取了年、月、日、星期几、时、分、秒等信息，然后封装成一个可读性略强的字符串并在指定id号的 div 盒子里显示出来——这是动态显示的，为什么呢？

首先，我们执行一次函数：

showTime();

这将能在 div 盒子里显示函数执行时的日期与时间信息，但是它是静态的，要动态显示，我们还需要JS 内置的 setInterval 定时器，让它每一秒（1000毫秒）去执行一次 showTime() 函数：

setInterval(showTime, 1000);

以上是代码的追加解释，重要！ @红影 @加林森 @绿叶清舟 @小辣椒

绿叶清舟

都精确到秒的啊

马黑黑

绿叶清舟 发表于 2022-3-18 20:51
都精确到秒的啊

毫秒都可以

加林森

马黑黑 发表于 2022-3-18 20:44
一楼的示例中，代码

function showTime(){

老黑召唤立马跑来了。

加林森

看看能不能出来?

马黑黑注：朋友，同一页里，你的照搬代码会影响二楼的演示。我把你的代码删除了，要是另外开帖，谢谢啊

加林森

奇怪奇怪，怎么不能显示呢？

马黑黑

红影 发表于 2022-3-18 19:09
获取月份：0~30，所以加 1
月份怎么是0-30？不是12个月的么？

写错了，是 0~11

马黑黑

加林森 发表于 2022-3-18 22:16
奇怪奇怪，怎么不能显示呢？

JS很娇嫩，一丁点的错误都是灭顶之灾

马黑黑

红影 发表于 2022-3-18 19:14
今天是周五啊，看你这示例里显示的是周六呢。

又搞错了，0~6里，0代表星期天。

在线写的，写完就发，也没认真检查

加林森

马黑黑 发表于 2022-3-18 22:51
JS很娇嫩，一丁点的错误都是灭顶之灾

我是复制与粘贴啊。好像明白了，先在自己的地方制作一下才行吧。

马黑黑

加林森 发表于 2022-3-18 23:19
我是复制与粘贴啊。好像明白了，先在自己的地方制作一下才行吧。

是的，由于一些变量同名，加之HTML盒子元素id唯一，在同一页不能简单复制测试。作为学习，建议在本地新建.html或.htm文档，保存后用浏览器打开

红影

马黑黑 发表于 2022-3-18 20:32
这个可不是玩儿的，这是知识点

用玩的心态去学习，学起来更有趣呀