Design a countdown, click "Start" to begin the countdown, the button becomes a "pause", then click on the "pause" button becomes "Continue" when the end of the countdown button for the "Reset" and click again to achieve countdown
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
border: 1px solid palegreen;
font-size: 35px;
line-height: 200px;
text-align: center;
margin: 20px auto;
}
#btn{
display: block;
width: 200px;
height: 35px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box">
60
</div>
<input type="button" value="开始" id="btn">
</body>
<script>
var obox = document.getElementById("box");
document.getElementById obtn = var ( "BTN");
// pass the data page and star num; num to calculate, to hold the initial star
var star = obox.innerHTML;
var NUM = obox.innerHTML;
var T;
// set a onoff switch, when the CPC, the event did not the same
var onoff = 0;
// mouse click
obtn.onclick = function () {
the clearInterval (T);
// determining, when onoff = 0, the execution start countdown
iF (OnOff == 0) {
T = the setInterval (function () {
// timer must be determined whether the end of each execution
iF (== num. 1) {
// num is 1 when indicating the end of the countdown, the display content changes to the page, and change the status button, clearing the timer
num = "countdown";
obtn.value = "reset";
OnOff =. 1;
the clearInterval (T);
} the else {
num--;
}
NUM = obox.innerHTML;
}, 1000)
obtn.value = "pause";
onoff = 2
after the end of the countdown when //, reset it, back to the initial state
} the else IF (== OnOff. 1) {
obox.innerHTML = Star;
NUM = Star;
obtn.value = "Start";
OnOff = 0 ;
// pause event, when onoff = 2, pause event
} the else iF (OnOff == 2) {
the clearInterval (T);
obtn.value = "continue"
OnOff = 0;
}
}
</ Script>
</ HTML>