用JavaScript中的计时事件制做一个时钟

- 日理万妓 2021-11-16 15:06 215阅读 0赞

1：首先创建一个div盒子用来显示时钟，然后给它设置一些简单的样式：

2：然后来写js：首先封装一个方法，随便命个名，比如：startTime（），然后在方法中写代码：获取当前时间，也就是new Date（），然后获取当前时间的小时，分钟，毫秒，因为获取到的小时，分钟，毫秒都是数字，并不会在前面自动补0，比如8分，那显示的就是8分，并不会跟我们看到的时钟一样是08分，所以要再封装一个方法，这个方法就是用来在前面补0的，当这个变量小于10时，那么就在它前面加个0： function checkTime(i) \{ if(i<10)\{ i="0"+i; \} return i; \} 3：然后再把获取到的小时，分钟，毫秒都放进这个方法的参数里面就OK了，这样显示的样式就跟我们平常看到的时钟一样了： var today=new Date(); var h=checkTime(today.getHours()); var m=checkTime(today.getMinutes()); var s=checkTime(today.getSeconds()); 4：获取到了时间以后，就可以将它们以不同的格式显示出来了，获取到刚刚那个div盒子的ID的innerHTML，然后让它等于小时加分钟加毫秒，中间加冒号或者随便什么的： document.getElementById('txt').innerHTML=h+":"+m+":"+s； 5：接下来就需要用到JavaScript的计时功能了，因为现在的div盒子的文本它是个“死的”，并不会像时钟一样动，那么我们现在就需要用计时这个东西让它每秒都调用这个方法，那么它就会每秒都去刷新时间，这样就达到了时钟的效果： setTimeout(startTime,1000); 6：再在页面加载事件里面去调用startTime（）这个方法，时钟这个功能就完成了， 完整代码：

![在这里插入图片描述][20190728194512895.png]  
![在这里插入图片描述][20190728194518175.png]

[20190728194512895.png]: /images/20211116/3219608d14944e3c97d65ab8649c4058.png
[20190728194518175.png]: /images/20211116/0d36595edc314142968b6c500dc6dc46.png