Question

我正在使用javascript创建倒计时。单击按钮时工作正常。

问题是，如果我在倒计时运行时单击按钮，它将不会从0开始。

我试图在功能开始时清除间隔，但不能正常工作。

HTML：

<style>
.container {
    width:50px;
    height:25px;
    overflow:hidden;
    margin-top:100px;
    margin-left:100px;
    border:2px solid #ddd;
}

.count {
    -webkit-transition: all 1;
    -moz-transition: all 1;
    transition: all 1;
}
</style>

<div class="container">
    <div class="count">
        <div>0</div>
    </div>  
</div>

<div style="text-align:center">
    <input type="button" onclick="countdown();" value="Click Me" />
</div>

Javascript代码：

function countdown() {
    clearInterval();
    $(".container .count").html("<div>0</div>")

    for(i=1;i<25;i++){
        $(".container .count").append("<div>"+i+"</div>");
    }

    var count1 = 0;
    var topmove = -10; 

    counting = setInterval(function(){                              
        $(".container .count").css({'-webkit-transform': 'translateY('+topmove+'px)'});
            count1 = count1+1;
            topmove = topmove-10;

            if(count1>40) {
                 clearInterval(counting);
            }  
    },100); 
 }

Answer 1

只需在全球范围内定义counting＆amp;在启动函数本身时执行clearInterval(counting);。您没有将参数传递给clearInterval。

DEMO

Answer 2

clearInterval需要一个参数告诉脚本停止倒计时。尝试这样的事情：

var counting;
function countdown() {
    if (typeof counting === 'number') clearInterval(counting);
    $(".container .count").html("<div>0</div>")
    for(i=1;i<25;i++)
        $(".container .count").append("<div>"+i+"</div>");  
    var count1 = 0,
        topmove = -10;
    counting = setInterval(function(){
        $(".container .count").css({
            '-webkit-transform': 'translateY('+topmove+'px)'
        });

        count1 = count1+1;
        topmove = topmove-10;
        if (count1>40){
            clearInterval(counting);
        }
    },100);
}

Javascript倒计时问题。想要在每次点击按钮时清除InterInterval

2 个答案: