javascript自动变动的时间日期效果
本章节分享一段代码实例,它实现获取当前客户端时间日期效果。
并且它能够实现自动变动,也就是说就像电子表一样,能够看到时间日期的变化。
代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> body, div{ margin:0; padding:0; } body{ color:#fff; font:16px/1.5 faef6fc5ed1; } #clock{ width:300px; text-align:center; background:#1a1a1a; margin:10px auto; padding:20px 0; } span{ color:#000; width:80px; line-height:2; background:#fbfbfb; border:2px solid #b4b4b4; margin:0 10px; padding:0 10px; } </style> <script> window.onload=function(){ var oClock=document.getElementById("clock"); var aSpan=oClock.getElementsByTagName("span"); setInterval(getTimes,1000); getTimes(); function getTimes(){ var oDate=new Date(); var aDate=[oDate.getHours(),oDate.getMinutes(),oDate.getSeconds()]; for(var index in aDate){ aSpan[index].innerHTML = format(aDate[index]) } } function format(a){ return a.toString().replace(/^(\d)$/, "0$1") } } </script> </head> <body> <div id="clock"> <span></span>点<span></span>分<span></span>秒 </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload=function(){},当文档完全加载完毕再去执行函数中的代码。
(2).var oClock=document.getElementById("clock"),获取id属性值为clock的元素对象。
(3).var aSpan=oClock.getElementsByTagName("span"),获取span元素集合。
(4).setInterval(getTimes,1000),每隔一秒执行一次getTimes()函数。
(5).getTimes(),执行函数,非常重要,否则会延迟一秒才会有效果。
(6).function getTimes(){},此函数能够获取当前时间日期。
(7).var oDate=new Date(),获取当前时间对象。
(8).var aDate=[oDate.getHours(),oDate.getMinutes(),oDate.getSeconds()],将当前小时、分钟和秒存入数组。
(9).for(var index in aDate){
aSpan[index].innerHTML = format(aDate[index])
} ,遍历数组,并将数组相应的值写入对应的span元素中,当然值是被经过格式化的。
(10).function format(a){
return a.toString().replace(/^(\d)$/, "0$1")
},如果是个位数字,那么就在前面加0.
二.相关阅读:
(1).getElementsByTagName()方法可以参阅document.getElementsByTagName()一章节。
(2).setInterval()方法可以参阅setInterval()一章节。
(3).replace()方法可以参阅正则表达式replace()一章节。
(4).时间日期对象可以参阅JavaScript Date 对象一章节。