Javascript:一个优雅的时钟-优快云博客

本文介绍如何使用JavaScript结合HTML和CSS创建一个动态更新的数字时钟，该时钟通过更换图片来显示时间，并提供了两种实现方法。

实现效果：

准备工作：

1# 定时器相关知识了解

2# javascript Date(日期)对象

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>

转载于:https://www.cnblogs.com/kevinCoder/p/4548806.html