时钟 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="float.js">
</script>
<script type="text/javascript">
window.onload = function ()
{
    function fntime()
    {
        var oimg = document.getElementsByClassName('num');
        var odot = document.getElementsByClassName('dot');
        var mytime = new Date();
        var ihours = mytime.getHours();
        var iminutes = mytime.getMinutes();
        var iseconds = mytime.getSeconds();
        var str = totwo(ihours)+totwo(iminutes)+totwo(iseconds);
        
        
        for( var i = 0; i < oimg.length; i++)
        {
            
            oimg[i].src = 'img/' + str.charAt(i) + '.png';
        }
        
        for ( var i = 0; i < odot.length; i++)
        {
            odot[i].src = 'img/second1.png';
            setTimeout(function ()
            {
                for(var i = 0; i < odot.length; i++ )
                {
                    odot[i].src = 'img/second2.png';
                }
            },500);
        }
    };
    
    
    function totwo(n)
    {
        return n < 10?'0'+n:''+n;    
    }
    
    setInterval(fntime,1000);
    fntime();
}
</script>
</head>

<body>
    <img class="num" src="img/0.png">
    <img class="num" src="img/0.png">
    <img class="dot" src="img/second1.png">
    <img class="num" src="img/0.png">
    <img class="num" src="img/0.png">
    <img class="dot" src="img/second1.png">
    <img class="num" src="img/0.png">
    <img class="num" src="img/0.png">
</div>
</body>
</html>

 

posted @ 2014-12-24 23:40  mayufo  阅读(109)  评论(0)    收藏  举报