电子时钟

Mr-W 2021-09-07 原文

setInterval()函数配合Date()函数做的电子时钟

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