JS—超酷时钟 

<!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>

 

posted @ 2015-12-13 13:59  搁浅の记忆  阅读(225)  评论(0)    收藏  举报