你的位置:首页 > Java教程

[Java教程]js实现的实时自动更新的时间效果

js实现的实时自动更新的时间效果:
在很多网站的页面某个地方,比如概率最多的就是网页顶部,会有一个时间能够自动更新的模块,这也算是比较任性的举措,不过有没有一般对人的影响不大,因为电脑本身就会带有时间,并且这个时间也基本是读取的本机系统的事件,不过既然有这样的需要,就介绍一下如何实现此功能。
代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#time{ width:220px; height:50px; margin:0px auto;}</style><script type="text/javascript"> function getDateDemo(){  var myDate=new Date();  var year=myDate.getFullYear();  var month=myDate.getMonth() + 1;  var date=myDate.getDate();  var hours=myDate.getHours();  var minutes=myDate.getMinutes();  var seconds=myDate.getSeconds();  //月份的显示为两位数字如09月  if(month < 10 ){   month = "0" + month;  }  if(date < 10 ){   date = "0" + date;  }  var dateTime=year+"年"+month+"月"+date+"日"+hours+"时"+minutes+"分"+seconds+"秒";  var divNode = document.getElementById("time");  divNode.innerHTML = dateTime; } window.setInterval("getDateDemo()",1000);</script> </head> <body> <div id="time"></div> </body> </html>

以上代码实现了我们的要求,下面介绍一下它的实现过程。
一.实现原理:
1.原理非常的简单,因为要实时显示时间,所以首先构造一个函数,此函数可以获取当前的事件,然后使用定时器函数每隔一秒执行一下此函数,于是在视觉上就会产生实时变化的效果,具体就不多说了,可以参阅代码注释。
二.代码注释:
1.function getDateDemo(){},此函数可以显示当前的时间日期,使用定时器函数每隔一秒调用一次就会实现了想要效果。
2.var myDate=new Date(),创建当前时间对象。
3.var year=myDate.getFullYear(),获取当前年份。
4.var month=myDate.getMonth() + 1,获取当前月份,因为getMonth()函数获取的值是从0开始的所以要加1。
5.var date=myDate.getDate(),获取当前的天。
6.var hours=myDate.getHours(),获取当前的小时。
7.var minutes=myDate.getMinutes(),获取当前的分钟。
8.var seconds=myDate.getSeconds(),获取当前的秒。
9.if(month < 10 ){ month = "0" + month;},如果当前的月份小于10,则前面加0,也就是会生成"05"这样的形式。
10.var dateTime=year+"年"+month+"月"+date+"日"+hours+"时"+minutes+"分"+seconds+"秒",将时间日期连接起来。
11.var divNode = document.getElementById("time"),获取div对象。
12.divNode.innerHTML = dateTime,将时间字符串作为div的内容。
13.window.setInterval("getDateDemo()",1000),每隔一秒执行一次函数。
三.相关阅读:
1.getFullYear()函数可以参阅javascript的Date对象的getFullYear()方法一章节。
2. getMonth()函数可以参阅javascript的Date对象的getMonth()方法一章节。
3.getDate()函数可以参阅javascript的Date对象的getDate()方法一章节。 
4.getHours()函数可以参阅JavaScript的Date对象的getHours()方法一章节。 
5.getMinutes()函数可以参阅JavaScript的Date对象的getMinutes()方法一章节。
6.getSeconds()函数可以参阅javascript的Date对象的getSeconds()方法一章节。
7. setInterval()函数可以参阅setInterval()函数用法详解一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11318

更多内容可以参阅:http://www.softwhy.com/javascript/