<!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>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style> .fas{ width:250px; height:200px; border:1px solid red; position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); /* display:none; */ } .cent{ display:none; text-align: center; line-height: 200px; } .hid{ display:none; } .disad{ } </style> </head> <body> <div> <button class="btn btn-default disab" onclick="times()">点击炸弹</button> <div class="fas"> <div class="cent"> <span class="times"> <b class="f"></b>分<b class="m"></b>秒 </span>倒计时 </div> <span class="hid">可再次点击</span> </div> </div> <script> function times(){ let f,m; $('.f').text(1); $('.m').text(19); f=parseInt($('.f').text()); m=parseInt($('.m').text()); $('.disab').attr("disabled","true"); $('.cent').css("display","block"); setInterval(function(){ if(m > 0){ m--; $('.m').text(m); }else if(f>0){ f--; m=59; $('.m').text(m); $('.f').text(f) }else if(m==0&&f==0){ $('.disab').removeAttr('disabled'); $('.hid').css('display','block'); $('.cent').css('display','none');
//在这里 我们清除了一下定时器
window.clearInterval(st); } },1000)
} </script> </body> </html>
注意 :因为这个定时器 是在每次点击后再次使用 所以必须要在定时器结束的位置 清除定时器
清除定时器:
window.clearInterval(timer1)/window.clearTimeout(time1);两种清除方式都可以清除通过setTimeout和setInterval设置的定时器(两种方式在设置定时器的时候有区别,清除定时器的时候没有区别),并且参数不仅可以是timer,还可以是其返回值,例如1,2;需要注意的是,定时器即使清除了,其返回值也不会清除,之后设置的定时器的返回值也会在其返回值的基础上继续向后排,这点类似于银行的排队领号,即使1号的业务办理完了,后边的人仍是从2号开始继续领号,而不是重新从1开始;