主体:
<div id="div1">00:00:00</div>
<div id="div2">
<button id="start">开始</button>
<button id="stop">停止</button><br>
</div>
<div id="div3">
<button id="continue">继续</button>
<button id="restoration">复位</button><br>
</div>
样式:
#div1 {
height: 100px;
width: 300px;
border: black solid 3px;
line-height: 100px;
text-align: center;
font-size: 50px;
margin: 100px auto 20px;
}
#div2,
#div3 {
margin: 0 auto;
height: 100px;
width: 250px;
}
#div3 {
display: none;
}
button {
height: 50px;
width: 100px;
font-size: 30px;
}
JS:
var oDiv = document.getElementById('div1');
var oStart = document.getElementById('start');
var oStop = document.getElementById('stop');
var oContinue = document.getElementById('continue');
var oRestoration = document.getElementById('restoration');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var m = 0;
var s = 0;
var ms = 0;
var mm = 0;
var ss = 0;
var mss = 0;
//触发装置，开始
oStart.onclick = function () {
t = setInterval(function () {
oDiv.innerHTML = secondChronographStr();
}, 10);
oStart.disabled = true;
}
//触发装置，停止
oStop.onclick = function () {
clearInterval(t);
oStart.disabled = false;
oDiv2.style.display = 'none';
oDiv3.style.display = 'block';
}
//触发装置，继续
oContinue.onclick = function () {
t = setInterval(function () {
oDiv.innerHTML = secondChronographStr();
}, 10);
oDiv2.style.display = 'block';
oDiv3.style.display = 'none';
oStart.disabled = true;
}
//触发装置，复位
oRestoration.onclick = function () {
m = 0;
s = 0;
ms = 0;
mm = 0;
ss = 0;
mss = 0;
oDiv.innerHTML = secondChronographStr();
oDiv2.style.display = 'block';
oDiv3.style.display = 'none';
}
//定义函数
//获取时间分钟秒毫秒
function secondChronographStr() {
ms++;
//分钟
if (m == 60) {
ms = 0;
s = 0;
m = 0;
}
if (m < 10) {
mm = '0' + m;
} else {
mm = m;
}
//秒
if (s == 60) {
m++;
s = 0;
}
if (s < 10) {
ss = '0' + s;
} else {
ss = s;
}
//毫秒
if (ms == 100) {
s++;
ms = 0;
}
if (ms < 10) {
mss = '0' + ms;
} else {
mss = ms;
}
return mm + ':' + ss + ':' + mss;
}