js基础3作业2
2018-08-21 本文已影响0人
HavenYoung
秒表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>秒表</title>
<style type="text/css">
.btn {
width: 100px;
height: 40px;
background-color: lightblue;
font-size: 25px;
border-radius: 10px;
}
#dshow {
width: 310px;
height: 40px;
background-color: cyan;
font-size: 25px;
border-radius: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="dshow">00:00:00</div>
<button id="bstart" class="btn" onclick="tstart()">开始</button>
<button id="bstop" class="btn" onclick="tstop()">停止</button>
<button id="breset" class="btn" onclick="treset()">重置</button>
</body>
</html>
<script type="text/javascript">
var odshow = document.getElementById('dshow')
var obstart = document.getElementById('bstart')
var obstop = document.getElementById('bstop')
var obreset = document.getElementById('breset')
var ms = 0
var sec = 0
var min = 0
var timer = null
function tstart() {
timer = setInterval(function() {
ms++
if(ms == 1000) {
sec++
ms = 0
}
if(sec == 60) {
min++
sec = 0
}
odshow.innerHTML = min + ':' + sec + ':' + ms
}, 1)
}
function tstop(){
clearInterval(timer)
}
function treset(){
odshow.innerHTML = '00:00:00'
}
</script>
