1.HTML：
<body>
<div id = "content">
<div id = "top">
<div id="time">00:00:000</div>
</div>
<div id = "bottom">
<div id = "btn_start">开始</div>
<div id = "btn_stop">停止</div>
<div id = "btn_reset">重置</div>
</div>
</div>
</body>
2.CSS
<script src="jquery-3.6.0.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#content{
width: 100%;
height: 100%;
position: relative;
background:url("img/1.cpp.jpg");
background-size: 100% 100%;
}
#top{
width:100%;
height: 250px;
position: relative;
}
#time{
font-size: 100px;
background-color: gray;
color: white;
position: absolute;
top: 50%;
margin-top:-60px ;
left: 50%;
margin-left: -220px;
border-radius: 20px;
}
#bottom{
width:100%;
height: 400px;
position: relative;
top: 100px;
}
#btn_start{
font-size: 50px;
background-color: red;
width: 20%;
color: white;text-align: center;
position: absolute;
top: 20px;
left: 40%;
border-radius: 30px;
}
#btn_stop{
font-size: 50px;
background-color: orange;
width: 20%;
color: white;text-align: center;
position: absolute;
top: 150px;
left: 40%;
border-radius: 30px;
}
#btn_reset{
font-size: 50px;
background-color: greenyellow;
width: 20%;
color: white;text-align: center;
position: absolute;
top: 280px;
left: 40%;
border-radius: 30px;
}
</style>
3.JS
<script type="text/javascript">
var min = 0;
var m = 0;
var ms = 0;
var id = 0;
function jsq(){
if(ms==100)
{
ms=0;
if(m==60){
min++;
m=0;
if(min==60){
min=0;
clearInterval(id);
}
else{
min++;
}
}
else{
m++;
}
}
else{
ms++;
}
$("#time").html(min+":"+m+":"+ms);
}
$("#btn_start").click(function(){
id = setInterval(jsq,10);
});
$("#btn_stop").click(function(){
clearInterval(id);
});
$("#btn_reset").click(function(){
location.reload();
});
</script>
效果展示：
