<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
    <style>
        img{float: left;}
    </style>
    <script>
       window.onload=function () {
           var img=document.getElementsByTagName('img');
           var but1=document.getElementById('but1');
           var but2=document.getElementById('but2');
           var tem=null;
           but1.onclick=function () {
               function mate() {
                   var oDate=new Date();
                   var str=doDou(oDate.getHours())+doDou(oDate.getMinutes())+doDou(oDate.getSeconds());
                   for(var i=0;i<img.length;i++){
                       img[i].src='img/'+str[i]+'.jpg';
                   }
               }
               tem=setInterval(mate,1000);
               mate();
           }
           but2.onclick=function () {
                clearInterval(tem);
           }
           function doDou(n) {
               if(n<10){
                   return '0'+n;
               }else{
                   return ''+n;
               }
           }
       }
    </script>
</head>
<body style="font-size: 80px;">
<div style="width: 500px;height: 500px;margin: auto;">
    <div style="height: 150px;">
        <img src="img/0.jpg">
        <img src="img/0.jpg">
        <div style="margin: auto; float: left;">
                :
        </div>
        <img src="img/0.jpg">
        <img src="img/0.jpg">
        <div style="margin: auto; float: left;">
                :
        </div>
        <img src="img/0.jpg">
        <img src="img/0.jpg">
    </div>
    <div>
        <input id="but1" type="button" value="开始"/>
        <input id="but2" type="button" value="停止"/>
    </div>
</div>

</body>
</html>