1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>倒计时</title> 8 <style> 9 10 </style> 11 </head> 12 <body> 13 <div id="box"> 14 3 15 </div> 16 <input type="button" id="btn" value="开始"> 17 </body> 18<Script> . 19 var Obox = document.getElementById ( "Box" ); 20 is var obtn = document.getElementById ( "BTN" ); 21 is var Start = obox.innerHTML; 22 is var NUM = obox.innerHTML; 23 is var T; 24 var onoff = 0; // 1. focus on the need to declare a switch, to determine the function every time you perform, and can be linked to the entire program. 25 26 is obtn.onclick = function () { 27 // 2. Click event trigger 28 IF (OnOff == 0 ) { 29 // 3. Prior to CPC, determines the state of the switch, the switch reaches zero, carried out 30 the clearInterval (T); 31 is // when each timer starts a timer is cleared every 32 T = the setInterval ( function () { 33 is // 7. The timer must be determined whether each execution end 34 is IF ( ==. 1 NUM ) { 35 // at the end of the button 2 is provided to change the contents, clear the timer 36 NUM = "end" ; 37 [ obtn.value = "reset" ; 38 is OnOff = 2 ; 39 the clearInterval ( T); 40 } the else { 41 is // If not completed, then the countdown 42 num-- ; 43 is } 44 is obox.innerHTML = NUM; 45 }, 1000 ); 46 is // 4. After the completion of the start function, the function button Save modified 47 obtn.value = "Pause"; // 5. here, if the function is not started, then it is possible that a pause function 48 = OnOff. 1 ; 49 } the else IF (== OnOff. 1 ) { 50 the clearInterval (T); 51 is // 6. after the stop function is done, the state modification into the next function 52 obtn.value = "continue" ; 53 onoff = 0 ; 54 is } the else IF (OnOff == 2 ) { 55 // 8. The start and pause if not function, then there may be a reset function 56 // status reset the digital display of digital computing, button text, function 57 = obox.innerHTML start; 58 NUM = start; 59 obtn.value = "start" ; 60 OnOff = 0 ; 61 is } 62 is } 63 is 64 65 66 67 68 // initial countdown achieve 69 70 // var = obtn Document. the getElementById ( "BTN"); 71 is // var NUM = 10; // initializes the counter 72 // document.getElementById ( "DIV1") the innerHTML + NUM = "seconds"; // for 10 seconds on the page 73 is // var = Tim the setInterval (function () { // define anonymous functions, 74 // num--; num // Save function is called once per a 75 // document.getElementById ( "DIV1") the innerHTML = num + "seconds"; // Save the page displayed after a the number of seconds 76 // iF (num == 1) {// when num becomes 1 when, through the clearInterval () countdown ends 77 // the clearInterval (Tim); 78 // } 79 // }, 1000); 80 // obtn.onclick = function () { 81 // clearInterval(tim); 82 83 84 // } 85 86 87 88 </script> 89 90 91 </html>
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> < meta http-equiv = "X- UA-Compatible" content = "ie = edge"> <title> countdown </ title> <style>
</ style> </ head> <body> <div ID = "Box"> 3 </ div> <input type = "button" id = "btn" value = " start"> </ body> <script > var obox = document.getElementById ( "box"); var obtn = document.getElementById ( " btn "); var start = obox.innerHTML ; var num = obox.innerHTML; var t; var onoff = 0;. // 1 focus, need to declare a switch, to determine the function every time you perform, and can be linked the entire program.
obtn.onclick = function () {// 2 . Click trigger event if (onoff == 0) {// 3. Before CPC, determines the state of the switch, when the switch 0 is performed clearInterval (t) ; // every time the timer start time of the timer to be cleared t = setInterval (function () { // 7. determines whether the timer should be performed each time the end if (num == 1) {// at the end, the setting button 2, change the contents, clear the timer num = "end"; obtn.value = "reset"; onoff = 2; clearInterval ( t);} else {// If not completed, followed by the countdown num -;} obox.innerHTML = num; }, 1000); // 4 after the start of the function is completed, the button Save function modified to obtn.value = "pause"; 5 // here. If the function is not started, then it is possible that a pause function onoff = 1;} else if ( onoff == 1) {clearInterval (t);. @ 6 after the stop function is done, the next state function modified to obtn .value = "continue"; onoff = 0;.} else if (onoff == 2) {// 8 if not start and pause features, then there may be digital reset // reset display of digital computing, press State button text, function obox.innerHTML = start; num = start; obtn.value = " Start"; onoff = 0;}}
implemented // initial countdown
// var obtn = document.getElementById ( "btn "); // var num = 10; // initializes a counter // document.getElementById ( "div1") innerHTML = num + " seconds"; // displayed on the page 10 s // var tim = setInterval (function ( ) {// definition of anonymous functions, // num--; // Save function for each call to a time num // document.getElementById ( "div1") innerHTML = num + " seconds." ; // seconds after the page is displayed in a Save // if (num == 1) { // when num becomes 1 by the clearInterval () end countdown // clearInterval (tim); //} / /}, 1000); // obtn.onclick = function () {// the clearInterval (Tim);
//}
</ Script>
</ HTML>