前端：用HTML , CSS ,JS 做一个秒表

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>