<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 70%;
margin: 0 auto;
}
.show {
font-size: 40px;
text-align: center;
font-weight: bold;
}
span {
display: inline-block;
border-radius: 10px;
border: 1px solid gray;
width: 100px;
height: 100px;
margin: 5px;
text-align: center;
line-height: 100px;
}
.buttons {
text-align: center;
}
.buttons button {
width: 82px;
height: 34px;
}
</style>
</head>
<body>
<div class="container">
<div class="show">
<span id="minuteSpan">00</span>:<span id="secondSpan">00</span>:<span id="msSpan">000</span>
</div>
<div class="buttons">
<button type="button" id="btnStart">开始</button>
<button type="button" id="btnWrite">记录</button>
<button type="button" id="btnReset">重置</button>
<button type="button" id="btnPause">清空记录</button>
</div>
<div id="records">
<p></p>
</div>
</div>
</body>
<script>
let m = 0;
let s = 0;
let ms = 0;
window.onload = function () {
btnStart.onclick = function () {
flag = setInterval(() => {
if (ms >= 999) {
ms = 0
s++;
if (s >= 60) {
m++;
s = 0;
}
secondSpan.innerText = checkMAndS(s);
minuteSpan.innerText = checkMAndS(m);
}
ms += 37;
msSpan.innerText = checkMilliSecond(ms);
}, 37);
}
btnWrite.onclick = function () {
var p = document.createElement('p');
p.innerText = minuteSpan.innerText + ':' + secondSpan.innerText + ':' + msSpan.innerText;
records.appendChild(p);
}
btnReset.onclick = function () {
m = 0;
s = 0;
ms = 0;
clearInterval(flag);
secondSpan.innerText = '00';
minuteSpan.innerText = '00';
msSpan.innerText = '000';
}
btnPause.onclick = function () {
records.innerHTML = '';
}
}
function checkMilliSecond(ms) {
if (ms < 10) {
return '00' + ms;
} else if (ms < 100) {
return '0' + ms;
}
return ms;
}
function checkMAndS(m) {
if (m < 10) {
return '0' + m;
}
return m;
}
</script>
</html>
