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>效果展示：
文章來源地址http://www.zghlxwxcb.cn/news/detail-735519.html
文章來源：http://www.zghlxwxcb.cn/news/detail-735519.html
到了這里，關(guān)于前端 ：用HTML , CSS ,JS 做一個秒表的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
