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