<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时时钟</title>
<style>
body,
div {
margin: 0;
padding: 0;
}
#countdown {
width: 300px;
text-align: center;
margin: 10px auto;
padding: 20px 0;
}
span {
color: #000;
width: 80px;
line-height: 2;
background: #fbfbfb;
border: 2px solid #b4b4b4;
margin: 0 10px;
padding: 0 10px;
}
</style>
</head>
<body>
<div id="countdown">
<span>01</span>
分钟
<span>20</span>
秒
<input type="button" value="启动" />
<input type="button" value="暂停" />
</div>
</body>
<script>
var startButton = document.querySelector("input:nth-of-type(1)");
var pauseButton = document.querySelector("input:nth-of-type(2)");
var minuteSpan = document.querySelector("span:nth-of-type(1)");
var secondSpan = document.querySelector("span:nth-of-type(2)");
var timeNumber =
parseInt(minuteSpan.innerHTML) * 60 + parseInt(secondSpan.innerHTML);
var minuteNumber = 0;
var secondNumber = 0;
var intervalNumber = 0;
var isStart = false;
startButton.onclick = function () {
if (isStart) {
return;
}
isStart = true;
intervalNumber = setInterval(function () {
timeNumber--;
minuteNumber = Math.floor(timeNumber / 60);
secondNumber = timeNumber % 60;
if (minuteNumber < 10 && minuteNumber >= 0) {
minuteNumber = "0" + minuteNumber;
}
if (secondNumber < 10 && secondNumber >= 0) {
secondNumber = "0" + secondNumber;
}
minuteSpan.innerHTML = minuteNumber;
secondSpan.innerHTML = secondNumber;
if (minuteNumber === "00" && secondNumber == "00") {
clearInterval(intervalNumber);
startButton.disabled = true;
}
}, 100);
};
pauseButton.onclick = function () {
clearInterval(intervalNumber);
isStart = false;
};
</script>
</html>