javascript自动变动的时间日期效果
本章节分享一段代码实例，它实现获取当前客户端时间日期效果。
并且它能够实现自动变动，也就是说就像电子表一样，能够看到时间日期的变化。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<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 对象一章节。
相关推荐
-
js判断变量是不是数字类型代码实例
下面是一段能够判断变量是否是数字类型的代码实例。代码如下:function isNumbr(vl) { rturn tyof vl === numbr && isFinit(vl)
-
js实现jquery的extend()代码实例
大家知道在jqury中xtnd()方法，这里就不多介绍了。具体可以参阅jQury.xtnd()方法一章节。下面就是一段通过原生js实现的xtnd()方法代码实例，当然jqury的也是
-
js检测搜狗浏览器、百度浏览器、微信浏览器代码实例
本章节分享一段代码实例，它实现了对各种浏览器类型的判断功能。比如搜狗浏览器、百度浏览器、微信浏览器等等，这段代码可能会随着时间的推移并不准确，因为浏览器的一些标识可能会发生变化，不过在当前还是非常好用
-
使用ajax方式提交表单代码实例
可能需要使用jx异步方式提交表单，下面就是一个代码片段，需要的朋友可以做一下参考。代码如下:$.jx({ url:mobilSurvyction_ddSurvy.ction,
-
防止表单提交按钮重复点击现象代码实例
本章节分享一段代码实例，它实现防止表单重复提交现象。代码如下:$(#submit).on(click, function (vnt) { vnt.rvntDfult();
