Javascript:一个优雅的时钟

时间：2023-03-09 02:41:16
Javascript:一个优雅的时钟

实现效果：

Javascript:一个优雅的时钟

准备工作：

1# 定时器 相关知识了解

2#javascript Date(日期)对象

3# 准备效果所用图片

Javascript:一个优雅的时钟

实现原理：

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>

　　

相关文章