<!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/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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开始；

点击倒计时

清除定时器：

猜你喜欢