js实现的实时自动更新的时间效果

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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/

以上是关于js实现的实时自动更新的时间效果的主要内容，如果未能解决你的问题，请参考以下文章

js实现的可以自动刷新的时间日期代码实例

Node.js热部署代码，实现修改代码后自动重启服务方便实时调试

Gulp构建前端自动化工作流

前端/h5 D3.js实现根据数据动态更新图形/类似进度实时变化效果

不算完美的实现了自动化部署的进度实时更新

32源码数据可视化：基于 Echarts + Python Flask 动态实时大屏 - 监管系统