倒计时，从10到0，停止，//点击按钮还原倒计时，到0，再停-----------------------点击，再还原
Posted zhuangch
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了倒计时，从10到0，停止，//点击按钮还原倒计时，到0，再停-----------------------点击，再还原相关的知识，希望对你有一定的参考价值。
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>
<!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>倒计时</title><style>
</style></head><body><div id="box">3</div><input type="button" id="btn" value="开始"></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. 重点，需要声明一个开关，来决定你每次执行的功能，以及能够联系起来整个程序。
obtn.onclick=function()//2.点击按钮触发事件if (onoff==0) //3.每次点击之前，判断开关的状态，在开关为0的时候，进行clearInterval(t);//在每次计时器开始的时候都要清除上一次计时器t = setInterval(function()// 7.计时器每次执行都要判断是否结束if(num == 1)//在结束的时候，设置按钮为2，改变内容，清除计时器num = "结束了";obtn.value = "复位";onoff = 2;clearInterval(t);else//如果没有结束，就接着进行倒计时num--;obox.innerHTML = num;,1000);//4.在开始功能完成之后，把按钮修改成下次功能obtn.value = "暂停";//5.在这里如果不是开始的功能，那么有可能就是暂停功能onoff = 1;else if(onoff == 1)clearInterval(t);//6.停止功能做完之后，把状态修改成下次的功能obtn.value = "继续";onoff = 0;else if(onoff == 2)//8.如果不是开始和暂停的功能，那么有可能是复位功能 //复位显示的数字，计算的数字，按钮的文字，功能的状态obox.innerHTML = start;num = start;obtn.value = "开始";onoff = 0;
// 初始倒计时的实现
// var obtn=document.getElementById("btn");// var num=10;//初始化计数器// document.getElementById("div1").innerHTML=num+"秒";// 在页面中显示10秒// var tim=setInterval(function ()//定义匿名函数，// num--; //函数每调用一次num减一// document.getElementById("div1").innerHTML=num+"秒"; //在页面中显示减一后的秒数// if(num==1) //当num变为1的时候，通过 clearInterval()结束倒计时// clearInterval(tim);// // ,1000); // obtn.onclick=function()// clearInterval(tim);
//
</script>
</html>
以上是关于倒计时，从10到0，停止，//点击按钮还原倒计时，到0，再停-----------------------点击，再还原的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript里面怎么点击按钮让计时停止，再次点击时工作？