JS实现秒表操作

效果展示

实现部分代码：

HTML代码部分

<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>

JS代码部分：

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 > 59) {
					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 = '';
	}
}

资源链接：

https://download.csdn.net/download/houmanjunxi/88418321