我想知道码 2021-10-29 22:24 采纳率: 100%
浏览 42
已结题

JS中的定时器为什么不能二次使用


<body>
    <div class="verify-box">
        <input type="text" name="verify_code" maxlength="20" autocomplete="off" placeholder="验证码" id="verify-code"style="margin-bottom:0px;">
        <button id="get-verify-code" class="button-big">获取验证码</button>
    </div>
    <script>
        var btn=document.querySelector('button');
        var time=59;
        btn.addEventListener('click',function(){
            btn.disabled=true;
            var timer=setInterval(function(){
                if (time==0){
                    clearInterval(timer);
                    btn.disabled=false; 
                    btn.innerHTML='获取验证码';
                    
                }else{
                    btn.innerHTML='还剩下'+time+'秒';
                    time--;
                }
            },10);
        });
    </script>
</body>

点击按钮后进行倒数计时,之后复原按钮后,再次点击不再出现效果

  • 写回答

3条回答 默认 最新

  • 雾里桃花 2021-10-30 09:36
    关注

    代码替换为如下

     var btn=document.querySelector('button');
                    btn.addEventListener('click',function(){
                        var time=59;
                        btn.disabled=true;
                        var timer=setInterval(function(){
                            if (time==0){
                                clearInterval(timer);
                                btn.disabled=false; 
                                btn.innerHTML='获取验证码';
                                
                            }else{
                                btn.innerHTML='还剩下'+time+'秒';
                                time--;
                            }
                        },10);
                    });
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 11月7日
  • 已采纳回答 10月30日
  • 创建了问题 10月29日