电子时钟 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time</title>
    <style type="text/css">
    body{background: #000;color: #fff;font-size: 60px;line-height: 100px}
    img{width:100px;vertical-align:middle;}
    #btn1{padding:10px;color:red;}
    </style>
    <script type="text/javascript">
    function toDouble(num){//小于10的数字前面加0
        if(num<10){
            return '0'+num;
        }else{
            return ''+num;
        }

    }
    window.onload=function(){
        //var str=oDate.getHours()+'点'+oDate.getMinutes()+'分'+oDate.getSeconds()+'秒';
        //alert(str);

        var oBtn=document.getElementById('btn1');
        var aImg=document.getElementsByTagName('img');
        var i=0;
        function upDateTime(){
            var oDate=new Date();
            var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());
            //alert(str);
            //var arr=['2','1','3','4','5','5'];
            for(i=0;i<aImg.length;i++){
                aImg[i].src='img/'+str.charAt(i)+'.png';//charAt()返回字符串当前位置的数值
            }
        }
        setInterval(upDateTime,1000);//函数名不加括号,setInterval有一秒的延迟
        upDateTime();
    }
    </script>

</head>
<body>
    <img src="img/0.png"/>
    <img src="img/0.png"/>
    <span>点</span>
    <img src="img/0.png"/>
    <img src="img/0.png"/>
    <span>分</span>
    <img src="img/0.png"/>
    <img src="img/0.png"/>
    <span>秒</span>
</body>
</html>

 

查看范例

posted @ 2017-01-17 17:50  Mr_W_Blog  阅读(253)  评论(0)  编辑  收藏  举报