js时钟

知识点

1.日期的获取

//获取年月日,时分秒

var oDate=new Date();//创建一个date对象

oDate.getFullYear();//获取年

oDate.getMonth();//获取月（0到11）

oDate.getDay();//获取星期（0到6）

oDate.getHours();//获取小时

oDate.getMinutes();//获取分钟

oDate.getSeconds();//获取秒

2.定时器的使用

setInterval（函数，时间）//间隔指定时间无限执行

setTimeout（函数，时间）//延迟指定时间执行一次

clearInterval（变量）//关闭指定的定时器，一定指定具体是哪个定时器

3.字符串的读取

str[i];//适用于IE9及以上，IE7,8不支持这种用法，会出错

str.charAt(i);//兼容所有

<script type="text/javascript">

window.onload=function(){
var oDiv1=document.getElementById('clock');
var oDiv2=oDiv1.getElementsByTagName('div')[0];
var aImg=oDiv2.getElementsByTagName('img');

//将时分秒都变成两位数
function toDou(n){
if(n<10){
return '0'+n;//加上引号的原因是为了使返回数据一定是字符串
}else{
return ''+n;//为了使返回数据一定是字符串
}

}
function clock(){//将图片地址改为相应的时间的功能封装为函数
//获取时分秒
var oDate=new Date();
var hour=toDou(oDate.getHours());
var minutes=toDou(oDate.getMinutes());
var seconds=toDou(oDate.getSeconds());
var time=hour+minutes+seconds;
//将图片地址改为相应的时间
for(var i=0;i<aImg.length;i++){
aImg[i].src="images/"+time.charAt(i)+".png";//time[i]不兼容
}
}

setInterval(clock,1000);//过1s刷新一次
clock();//先执行一次函数，解决刷新页面初始图片全为0的bug

}
</script>

<div id="clock">
<h2><img src="images/title.png" /></h2><br>
<div>
<img src="images/0.png"/>
<img src="images/0.png"  />
:
<img src="images/0.png" />
<img src="images/0.png"  />
:
<img src="images/0.png"/>
<img src="images/0.png" />
</div>
</div>

<style>
*{margin:0;padding:0;}
html{ height:100%;}
body{width:100%;height:100%;background: url(images/bg.png) no-repeat; background-size:cover; color:#fff; font-size:30px; font-weight: 600;}
#clock{ width:70%; margin:10% auto; text-align:center;}
</style>