JS—超酷时钟

时间：2015-12-13 15:18:00 阅读：216 评论：0 收藏：0 [点我收藏+]

标签：

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

JS—超酷时钟

标签：

原文地址：http://www.cnblogs.com/syhandll/p/5042653.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行