JS：初识Date对象
本帖最后由 马黑黑 于 2022-3-19 09:04 编辑在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>
本帖最后由 马黑黑 于 2022-3-18 22:53 编辑 <br /><br /><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个月的么？ 这个好厉害，能直接显示当前时间呢{:4_199:} 今天是周五啊，看你这示例里显示的是周六呢。 又是一个好玩的，黑黑真棒{:4_199:} 红影 发表于 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 22:58 编辑 <br /><br />看看能不能出来?
<br><br>马黑黑注：朋友，同一页里，你的照搬代码会影响二楼的演示。我把你的代码删除了，要是另外开帖，谢谢啊
奇怪奇怪，怎么不能显示呢？{:4_203:} 红影 发表于 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代表星期天。
在线写的，写完就发，也没认真检查{:5_117:} 马黑黑 发表于 2022-3-18 22:51
JS很娇嫩，一丁点的错误都是灭顶之灾
我是复制与粘贴啊。好像明白了，先在自己的地方制作一下才行吧。 加林森 发表于 2022-3-18 23:19
我是复制与粘贴啊。好像明白了，先在自己的地方制作一下才行吧。
是的，由于一些变量同名，加之HTML盒子元素id唯一，在同一页不能简单复制测试。作为学习，建议在本地新建.html或.htm文档，保存后用浏览器打开 马黑黑 发表于 2022-3-18 20:32
这个可不是玩儿的，这是知识点
用玩的心态去学习，学起来更有趣呀{:4_173:}