今天做了一个可以记录的秒表，大家可以一起来看看。
我的这个有一部分的用带有0到9的图片替换了数字0到9，有兴趣的小伙伴可以到网上找相关的图片，0到9命名方法是 0到9.jpg 。
6.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="6.js"></script>
<link rel="stylesheet" type="text/css" href="6.css">
<body>
<div style="display: flex; flex-direction: row;">
<h1 id="s">00</h1>
<h1>:</h1>
<h1 id="f">00</h1>
<h1>:</h1>
<h1 id="m">00</h1>
</div>
<div class="a">
<img id="4" src="image/0.png"/>
<img id="5" src="image/0.png"/>
<h2>:</h2>
<img id="2" src="image/0.png"/>
<img id="3" src="image/0.png"/>
<h2>:</h2>
<img id="0" src="image/0.png"/>
<img id="1" src="image/0.png"/>
</div>
<button οnclick="a()">暂停秒表</button>
<button οnclick="qq()">开始秒表</button>
<button οnclick="cz()">重置</button>
<button οnclick="lj()">记录</button>
<h1 id="20" class="da">
</h1>
</body>
</html>
6.js
var ay=[];
var t="";
function qq(){
var s=0;
var f=0;
var m=0;
// 开始
timer = setInterval(function () {
s++;
if(s==60){
f++;
s=0;
}
if(f==60){
f=0;
m++;
}
var st=s < 10 ? '0'+s : s+'';
var ft=f < 10 ? '0'+f : f+'';
var mt=m < 10 ? '0'+m : m+'';
document.getElementById("m").innerHTML=s < 10 ? '0'+s : s+'';
document.getElementById("f").innerHTML=f < 10 ? '0'+f : f+'';
document.getElementById("s").innerHTML=m < 10 ? '0'+m : m+'';
document.getElementById("0").src="image/"+st.substr(0,1)+''+".png";
document.getElementById("1").src="image/"+st.substr(1,1)+''+".png";
document.getElementById("2").src="image/"+ft.substr(0,1)+''+".png";
document.getElementById("3").src="image/"+ft.substr(1,1)+''+".png";
document.getElementById("4").src="image/"+mt.substr(0,1)+''+".png";
document.getElementById("5").src="image/"+mt.substr(1,1)+''+".png";
}, 1000);}
//停止
function a(){clearInterval(timer);}
//记录
function lj(){
t="";
var m2=document.getElementById("m").innerHTML;
var f2=document.getElementById("f").innerHTML;
var s2=document.getElementById("s").innerHTML
ay.push(m2+f2+s2);
for(var i=0;i<ay.length;i++){
t=t+"<h1>"+ay[i].substr(0,2)+"</h1>"+"<h1>:</h1>"+"<h1>"+ay[i].substr(2,2)+"</h1>"+"<h1>"+"<h1>:</h1>"+ay[i].substr(4,2)+"</h1>";
}
document.getElementById("20").innerHTML=t;
}
//重置
function cz(){
clearInterval(timer)
document.getElementById("0").src="image/0.png";
document.getElementById("1").src="image/0.png";
document.getElementById("2").src="image/0.png";
document.getElementById("3").src="image/0.png";
document.getElementById("4").src="image/0.png";
document.getElementById("5").src="image/0.png";
document.getElementById("m").innerHTML="00";
document.getElementById("f").innerHTML="00";
document.getElementById("s").innerHTML="00";
document.getElementById("20").innerHTML="";
s=0;
f=0;
m=0;
}
6.css
.xiao{
display: flex;
flex-direction: row;
margin-top: 0px;
background-color: red;
}
.da{
display: flex; flex-direction: row;
}
.a{
display: flex;
flex-direction: row;
}
这是文件里面的图片