数码时钟
数码时钟:也可以称为电子表,是应用实时定时器的典型案例。下面我来为大家介绍一下如何做成以下形式的数码时钟。
(上面所有的数字、文字都是图片形式的。)
(一)首先,我们用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.οnlοad=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.οnlοad=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();
};
</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>