你的位置:首页 > Java教程

[Java教程]js实现的年月日日期显示代码实例


js实现的年月日日期显示代码实例:
很多网页在网页的顶端或者其他位置有一个显示日期的,并且还可以自动跳动,那就再好不过了,下面就通过代码实例简单介绍一下如何实现此效果。
代码实例如下:

 

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script type="text/javascript">var week; var weeks;var date; var time;var hour;var minute;var second;function getTimeNow() {  time=new Date();  hour=time.getHours();  minute=time.getMinutes();  second=time.getSeconds();  weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; week=weeks[time.getDay()]; date=(time.getFullYear())+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" ";  nowTime.innerHTML ="当前时间:"+date+week+" "+hour+":"+minute+":"+second;} window.onload=function(){ var nowTime=document.getElementById("nowTime");  setInterval("getTimeNow()",1000); }</script></head><body> <div id="nowTime"></</div> </body></html>

 

以上代码实现了我们的功能,能够实时的显示当前系统的日期和时间,下面就简单介绍一下它的实现过程。
一.实现原理:
原理非常的简单,首先创建一个函数getTimeNow(),当运行此函数的时候,就能够将当前的年月日时间写入div,获取年月日的方式都是采用的date对象的函数。然后再使用setInterval()函数每隔一秒执行一次getTimeNow()函数,这样的话,就可以事实的在div中显示当前的日期时间了。
二.代码注释:
1.var week,声明变量,用语存放周,下面的几个变量声明原理也是如此。
2.function getTimeNow(){},此函数可以获取当前系统的日期时间,并写入div。
3.time=new Date();,创建当前时间对象。
4.hour=time.getHours(),获取当前时间的小时。
5.minute=time.getMinutes(),获取当前时间的分钟。
6.second=time.getSeconds(),获取当前时间的秒。
7.weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],创建一个数字,数组中的元素是星期。
8.week=weeks[time.getDay()],getDay()函数可以翻译0-6的值,利用这个特点,可以取得当前是星期几。
9.date=(time.getFullYear())+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" ",字符串连接,将当前的年月日连接起来。
10.nowTime.innerHTML ="当前时间:"+date+week+" "+hour+":"+minute+":"+second,将年月日时间和日期写入div。
三.相关阅读:
1.关于date对象和相关函数可以参阅ECMAScript的Date对象一章节。
2. setInterval()函数可以参阅setInterval()函数用法详解一章节。 

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

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