您的位置：首页 > Web前端 > JavaScript

定时器的应用（三）：数码时钟

2016-02-02 10:16 639 查看

数码时钟

数码时钟：也可以称为电子表，是应用实时定时器的典型案例。下面我来为大家介绍一下如何做成以下形式的数码时钟。



（上面所有的数字、文字都是图片形式的。）



（一）首先，我们用HTML语句来搭建一个框架。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数码时钟</title>
<style>
*{margin:0px; padding:0px;}
body{background:#003; color:white; font-size:50px;}
#title{margin-top:180px;}
</style>
</head>

<body>
<center>
<div id="title">
<img src="img/title.jpg" alt="超酷时钟"/>
<br/>
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/year.jpg" alt="年"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/month.jpg" alt="月"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/seven.jpg" alt="日"/>
<br/>
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
:
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
:
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
<br/>
<img src="img/week.jpg" alt="星期"/>
<img src="img/one.jpg" alt="一"/>
</div>
</center>
</body>
</html>



（二）使用实时定时器setInterval调整时间。

①首先获取系统时间（年、月、日、时、分、秒、星期），形成字符串。

function toDou(n)
{
if(n<10)
{
return '0'+n;
}
else
{
return ''+n;
}
}


var oDate=new Date();
var iYear=oDate.getFullYear();//年
var iMonth=oDate.getMonth();//月
var iDate=oDate.getDate();//日
var iWeek=(oDate.getDay()+6)%7;//星期
var week_name=["one","two","three","four","five","six","seven"];
var str=''+iYear+toDou(iMonth+1)+toDou(iDate)+toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
说明：getFullYear( );获取取得是年份（2016：数字），getMonth( );获取的是月份（范围是：0—11，所以比实际月份小1，获取的是数字），getDate( );获取的是几号，getDay( );获取的是星期几（范围：1—7，获取的是：数字）。所以我们需要写一个函数toDou(n)；将数字转换成字符串的形式。

② 接着，我们将字符串插入到相应的位置，并修改相应的图片。

for(var i=1;i<aImg.length;i++)
{
switch(i)
{
case 1:
case 2:
case 3:
case 4:
aImg[i].src='img/'+str.charAt(i-1)+'.jpg';
break;
case 6:
case 7:
aImg[i].src='img/'+str.charAt(i-2)+'.jpg';
break;
case 9:
case 10:
aImg[i].src='img/'+str.charAt(i-3)+'.jpg';
break;
case 12:
case 13:
case 14:
case 15:
case 16:
case 17:
aImg[i].src='img/'+str.charAt(i-4)+'.jpg';
break;
case 19:
aImg[i].src='img/'+week_name[iWeek]+'.jpg';
break;
default:
break;
}
}
}
但是这样得到的是静态的时钟，只能刷新一次更新一次时间，所以，我们需要引入实时定时器（setInterval），让它可以自动更新时间。

③插入实时定时器（setInterval）：我们上述for循环结构包装成一个ticks()函数，然后调用。

var aImg=document.getElementsByTagName("img");

function ticks()
{
var oDate=new Date();
var iYear=oDate.getFullYear();//年
var iMonth=oDate.getMonth();//月
var iDate=oDate.getDate();//日
var iWeek=(oDate.getDay()+6)%7;//星期
var week_name=["one","two","three","four","five","six","seven"];

var str=''+iYear+toDou(iMonth+1)+toDou(iDate)
+toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
for(var i=1;i<aImg.length;i++)
{
switch(i)
{
case 1:
case 2:
case 3:
case 4:
aImg[i].src='img/'+str.charAt(i-1)+'.jpg';
break;
case 6:
case 7:
aImg[i].src='img/'+str.charAt(i-2)+'.jpg';
break;
case 9:
case 10:
aImg[i].src='img/'+str.charAt(i-3)+'.jpg';
break;
case 12:
case 13:
case 14:
case 15:
case 16:
case 17:
aImg[i].src='img/'+str.charAt(i-4)+'.jpg';
break;
case 19:
aImg[i].src='img/'+week_name[iWeek]+'.jpg';
break;
default:
break;
}
}
}
setInterval(ticks,1000);
但是，还是存在一点点的小瑕疵，每次打开该页面时，总是有一秒停在初始状态。所以，我们需要在打开该页面时，先运行一下ticks函数。

window.onload=function()
{
var aImg=document.getElementsByTagName("img");

function ticks()
{
var oDate=new Date();
var iYear=oDate.getFullYear();//年
var iMonth=oDate.getMonth();//月
var iDate=oDate.getDate();//日
var iWeek=(oDate.getDay()+6)%7;//星期
var week_name=["one","two","three","four","five","six","seven"];

var str=''+iYear+toDou(iMonth+1)+toDou(iDate)
+toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
for(var i=1;i<aImg.length;i++)
{
switch(i)
{
case 1:
case 2:
case 3:
case 4:
aImg[i].src='img/'+str.charAt(i-1)+'.jpg';
break;
case 6:
case 7:
aImg[i].src='img/'+str.charAt(i-2)+'.jpg';
break;
case 9:
case 10:
aImg[i].src='img/'+str.charAt(i-3)+'.jpg';
break;
case 12:
case 13:
case 14:
case 15:
case 16:
case 17:
aImg[i].src='img/'+str.charAt(i-4)+'.jpg';
break;
case 19:
aImg[i].src='img/'+week_name[iWeek]+'.jpg';
break;
default:
break;
}
}
}
setInterval(ticks,1000);
ticks();
};
下面是完整的代码，希望对大家有帮助。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数码时钟</title>
<style>
*{margin:0px; padding:0px;}
body{background:#003; color:white; font-size:50px;}
#title{margin-top:180px;}
</style>
<script>
function toDou(n)
{
if(n<10)
{
return '0'+n;
}
else
{
return ''+n;
}
}

window.onload=function()
{
var aImg=document.getElementsByTagName("img");

function ticks()
{
var oDate=new Date();
var iYear=oDate.getFullYear();//年
var iMonth=oDate.getMonth();//月
var iDate=oDate.getDate();//日
var iWeek=(oDate.getDay()+6)%7;//星期
var week_name=["one","two","three","four","five","six","seven"];

var str=''+iYear+toDou(iMonth+1)+toDou(iDate)
+toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
for(var i=1;i<aImg.length;i++)
{
switch(i)
{
case 1:
case 2:
case 3:
case 4:
aImg[i].src='img/'+str.charAt(i-1)+'.jpg';
4000
break;
case 6:
case 7:
aImg[i].src='img/'+str.charAt(i-2)+'.jpg';
break;
case 9:
case 10:
aImg[i].src='img/'+str.charAt(i-3)+'.jpg';
break;
case 12:
case 13:
case 14:
case 15:
case 16:
case 17:
aImg[i].src='img/'+str.charAt(i-4)+'.jpg';
break;
case 19:
aImg[i].src='img/'+week_name[iWeek]+'.jpg';
break;
default:
break;
}
}
}
setInterval(ticks,1000);
ticks();
};
</script>
</head>

<body>
<center>
<div id="title">
<img src="img/title.jpg" alt="超酷时钟"/>
<br/>
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/year.jpg" alt="年"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/month.jpg" alt="月"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
<img src="img/seven.jpg" alt="日"/>
<br/>
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
:
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
:
<img src="img/0.jpg" alt="0"/>
<img src="img/0.jpg" alt="0"/>
<br/>
<img src="img/week.jpg" alt="星期"/>
<img src="img/three.jpg" alt="三"/>
</div>
</center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript setInerval 数码时钟 定时器
相关文章推荐
新的分享
章节导航