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/