JavaScript动态时间日期
分类:实例代码
JavaScript动态时间日期属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了动态的时间。
当然我们不是说那种华丽的圆形的钟表的效果,这里只是获取系统时间,能够自动变化的效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script type="text/javascript"> function Format2Len(i){ return i < 10 ? "0" + i : i; } function RefreshClock(){ var CurrentTime=new Date(); var timeStr=CurrentTime.getFullYear() + "-" + Format2Len(CurrentTime.getMonth()+1) + "-" + Format2Len(CurrentTime.getDate()) + " " + Format2Len(CurrentTime.getHours()) + ":" + Format2Len(CurrentTime.getMinutes()) + ":" + Format2Len(CurrentTime.getSeconds()); txtClock.value = timeStr; setTimeout(RefreshClock,1000); } window.onload=function(){ RefreshClock(); } </script> </head> <body> 当前时间:<input type="text" id="txtClock" /> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function Format2Len(i){
return i < 10 ? "0" + i : i;
},此方法实现了在个位数前面加0的功能,比如5被修改成05。
(2).function RefreshClock(){},此方法实现了核心功能。
(3).var CurrentTime=new Date(),创建当前时间对象。
(4).var timeStr=CurrentTime.getFullYear() + "-" +,获取年份,后面使用横岗连接。
(5).setTimeout(RefreshClock,1000),以递归的方式不断调用RefreshClock函数。
二.相关阅读:
(1).setTimeout()方法参阅setTimeout()一章节。
(2).Date对象参阅JavaScript Date对象一章节。
JavaScript动态时间日期,这样的场景在实际项目中还是用的比较多的,关于JavaScript动态时间日期就介绍到这了。