<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超酷时钟</title>
<style>
*{
margin:0px;
padding:0px;
}
body
{
background:#9FF;
color:white;
font-size:50px;
}
#bg
{
width:100%;
height:400px;
background-image:url(image/bg.png);
background-repeat:no-repeat;
margin-left:450px;
margin-top:100px;
}
#bg #tittle
{
width:220px;
height:60px;
padding-left:240px;
padding-top:40px;
}
#bg #date
{
width:600px;
height:50px;
padding-left:70px;
margin-top:20px;
}
#bg #watch
{
width:400px;
height:60px;
padding-left:150px;
margin-top:20px;
}
#bg #day
{
width:150px;
height:50px;
padding-left:280px;
margin-top:20px;
}
#day #d1
{
float:left;
}
#day #d2
{
margin-left:5px;
float:left;
}
</style>
<script>
function toDou(n)
{
if (n<10)
return '0'+n;
else return ''+n;
}
window.onload=function()
{
var oWtc=document.getElementById('watch');
var aWmg=oWtc.getElementsByTagName('img');
function tick1()
{
var oDate1=new Date();
var str1=toDou(oDate1.getHours())+toDou(oDate1.getMinutes())+toDou(oDate1.getSeconds());
for (var i=0; i<aWmg.length; i++)
{
aWmg[i].src='image/'+str1.charAt(i)+'.png';
}
}
setInterval(tick1, 1000);
tick1();
var oDte=document.getElementById('date');
var aDmg=oDte.getElementsByTagName('img');
function tick2()
{
var oDate2=new Date();
var str2=toDou(oDate2.getFullYear())+toDou(oDate2.getMonth()+1)+toDou(oDate2.getDate());
var k=0;
for (var i=0; i<aDmg.length; i++)
{
if (i==4 || i==7 || i==10) continue;
aDmg[i].src='image/'+str2.charAt(k++)+'.png';
}
}
setInterval(tick2, 24*60*60*1000);
tick2();
var oDay=document.getElementById('day');
var aYmg=oDay.getElementsByTagName('img');
function tick3()
{
var oDate3=new Date();
var d=oDate3.getDay();
for (var i=0; i<aYmg.length; i++)
{
if (i==0) continue;
aYmg[i].src='image/'+d+'.jpg';
}
}
setInterval(tick3, 24*60*60*1000);
tick3();
};
</script>
</head>
<body>
<div id="bg">
<div id="tittle">
<img src="image/title.png"/>
</div>
<div id="date">
<img src="image/2.png"/>
<img src="image/0.png"/>
<img src="image/1.png"/>
<img src="image/5.png"/>
<img src="image/year.png"/>
<img src="image/1.png"/>
<img src="image/2.png"/>
<img src="image/month.png"/>
<img src="image/1.png"/>
<img src="image/3.png"/>
<img src="image/0.jpg"/>
</div>
<div id="watch">
<img src="image/0.png"/>
<img src="image/0.png"/>
:
<img src="image/0.png"/>
<img src="image/0.png"/>
:
<img src="image/0.png"/>
<img src="image/0.png"/>
</div>
<div id="day">
<div id="d1"><img src="image/week.png"/></div>
<div id="d2"><img src="image/0.jpg"/></div>
</div>
</div>
</body>
</html>
