Javascript:一个优雅的时钟
实现效果：
准备工作：
1# 定时器 相关知识了解
3# 准备效果所用图片
实现原理：
1# 获取当前时间；
var time=new Date(); var iHours=time.getHours(); var iMinutes=time.getMinutes(); var iSeconds=time.getSeconds(); var iNow=double(iHours)+':'+double(iMinutes)+':'+double(iSeconds);
2# 设定定时器,1s执行一次；
setInterval(function(){
code//代码部分
},1000);
3# 通过实时的时间数据，动态改变对应的img属性值
3.1 方法一： 固定位置图片显示相应时间数据
arrImg[0].src='img/'+parseInt(iHours/10)+'.jpg'; arrImg[1].src='img/'+iHours%10+'.jpg';
3.2 方法二：通过charAt()获取日期字符串指定位置字符，然后改变相应图片的img属性值
arrImg[i].src='img/' +iNow.charAt(i)+'.jpg';
代码部分：
方法一 : 固定位置图片显示相应时间数据
<!DOCTYPE html>
<html>
<head>
<title>时间计时器</title>
<meta charset='utf-8'/>
<style type="text/css">
body{font-size: 80px;}
img{float: left;width: 60px;margin:0 3px;}
.middle{
width: 600px;
height: 100px;
position: absolute;
top:0;right: 0;bottom: 0;left: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="time"></div>
<div class="middle">
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/colon.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/colon.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
</div>
<script type="text/javascript">
var oTime=document.getElementById('time');
var arrImg=document.getElementsByTagName('img');
setInterval(function(){
timer();
},1000);
timer();//消除刷新网页时,时钟函数延迟带来的误差
//时钟两位数显示
function double(n){
if(n<10){
return '0'+n;
}else{
return ''+n;
}
}
function timer(){
var time=new Date();
var iHours=time.getHours();
var iMinutes=time.getMinutes();
var iSeconds=time.getSeconds();
var iNow=double(iHours)+':'+double(iMinutes)+':'+double(iSeconds);
arrImg[0].src='img/'+parseInt(iHours/10)+'.jpg';
arrImg[1].src='img/'+iHours%10+'.jpg';
arrImg[3].src='img/'+parseInt(iMinutes/10)+'.jpg';
arrImg[4].src='img/'+iMinutes%10+'.jpg';
arrImg[6].src='img/'+parseInt(iSeconds/10)+'.jpg';
arrImg[7].src='img/'+iSeconds%10+'.jpg';
return iNow;
}
</script>
</body>
</html>
方法二 :通过charAt()获取日期字符串指定位置字符，然后改变相应图片的img属性值
<!DOCTYPE html>
<html>
<head>
<title>时间计时器</title>
<meta charset='utf-8'/>
<style type="text/css">
body{font-size: 80px;}
img{float: left;width: 60px;margin:0 3px;}
.middle{
width: 600px;
height: 100px;
position: absolute;
top:0;right: 0;bottom: 0;left: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="time"></div>
<div class="middle">
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
</div>
<!--<img src="img/colon.jpg"/>-->
<script type="text/javascript">
//alert(timer());
var oTime=document.getElementById('time');
var arrImg=document.getElementsByTagName('img');
setInterval(function(){
timer();
},1000);
timer();//消除刷新网页时,时钟函数延迟带来的误差
//时钟两位数显示
function double(n){
if(n<10){
return '0'+n;
}else{
return ''+n;
}
}
function timer(){
var time=new Date();
var iYear=time.getFullYear();
var iMonth=time.getMonth()+1;
var iDay=time.getDay();
var iHours=time.getHours();
var iMinutes=time.getMinutes();
var iSeconds=time.getSeconds();
var iNow=double(iHours)+':'+double(iMinutes)+':'+double(iSeconds);
arrImg[0].src='img/'+parseInt(iHours/10)+'.jpg';
arrImg[1].src='img/'+iHours%10+'.jpg';
arrImg[3].src='img/'+parseInt(iMinutes/10)+'.jpg';
arrImg[4].src='img/'+iMinutes%10+'.jpg';
arrImg[6].src='img/'+parseInt(iSeconds/10)+'.jpg';
arrImg[7].src='img/'+iSeconds%10+'.jpg';
for(var i=0;i<arrImg.length;i++){
if(i==2 || i==5){
arrImg[i].src='img/colon.jpg';
}else{
arrImg[i].src='img/' +iNow.charAt(i)+'.jpg';
}
}
return iNow;
}
</script>
</body>
</html>
