<!DOCTYPE doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                Document
            </title>
            <style>
                #div1 {background: black;color: white;font-size: 50}
            </style>
            <script>
				window.onload =function(){   
					var od =document.getElementById('div1')
					var ai =od.getElementsByTagName('img')
					function tick(){

					var data1 =new Date()
					var str1 =toDou(data1.getHours())+toDou(data1.getMinutes())+toDou(data1.getSeconds())
					for(var i =0;i<ai.length;i++){
					ai[i].src ='img/'+str1[i]+'.png'
					}
					}

					setInterval(tick,1000)
					tick()
					}

					function toDou(n){
					if (n<10){
					return '0'+n
					}else{
					return ''+n
					}
					}
            </script>
        </meta>
    </head>
    <body>
        <div id="div1">
            <img alt="" src="img/1.png">
                <img alt="" src="img/2.png">
                    :
                    <img alt="" src="img/3.png">
                        <img alt="" src="img/4.png">
                            :
                            <img alt="" src="img/5.png">
                                <img alt="" src="img/6.png">
                                </img>
                            </img>
                        </img>
                    </img>
                </img>
            </img>
        </div>
    </body>
</html>