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 var obtn = document.getElementById("btn"); 21 var start = obox.innerHTML; 22 var num = obox.innerHTML; 23 var t; 24 var onoff = 0;//1. 重点，需要声明一个开关，来决定你每次执行的功能，以及能够联系起来整个程序。 25 26 obtn.onclick=function(){ 27 //2.点击按钮触发事件 28 if (onoff==0) { 29 //3.每次点击之前，判断开关的状态，在开关为0的时候，进行 30 clearInterval(t); 31 //在每次计时器开始的时候都要清除上一次计时器 32 t = setInterval(function(){ 33 // 7.计时器每次执行都要判断是否结束 34 if(num == 1){ 35 //在结束的时候，设置按钮为2，改变内容，清除计时器 36 num = "结束了"; 37 obtn.value = "复位"; 38 onoff = 2; 39 clearInterval(t); 40 }else{ 41 //如果没有结束，就接着进行倒计时 42 num--; 43 } 44 obox.innerHTML = num; 45 },1000); 46 //4.在开始功能完成之后，把按钮修改成下次功能 47 obtn.value = "暂停";//5.在这里如果不是开始的功能，那么有可能就是暂停功能 48 onoff = 1; 49 }else if(onoff == 1){ 50 clearInterval(t); 51 //6.停止功能做完之后，把状态修改成下次的功能 52 obtn.value = "继续"; 53 onoff = 0; 54 }else if(onoff == 2){ 55 //8.如果不是开始和暂停的功能，那么有可能是复位功能 56 //复位显示的数字，计算的数字，按钮的文字，功能的状态 57 obox.innerHTML = start; 58 num = start; 59 obtn.value = "开始"; 60 onoff = 0; 61 } 62 } 63 64 65 66 67 68 // 初始倒计时的实现 69 70 // var obtn=document.getElementById("btn"); 71 // var num=10;//初始化计数器 72 // document.getElementById("div1").innerHTML=num+"秒";// 在页面中显示10秒 73 // var tim=setInterval(function (){//定义匿名函数， 74 // num--; //函数每调用一次num减一 75 // document.getElementById("div1").innerHTML=num+"秒"; //在页面中显示减一后的秒数 76 // if(num==1){ //当num变为1的时候，通过 clearInterval()结束倒计时 77 // clearInterval(tim); 78 // } 79 // },1000); 80 // obtn.onclick=function(){ 81 // clearInterval(tim); 82 83 84 // } 85 86 87 88 </script> 89 90 91 </html>