jQuery重新启动后，不再响应单击_Jquery_Loops

jQuery重新启动后，不再响应单击

jquery loops

jQuery重新启动后，不再响应单击,jquery,loops,Jquery,Loops,我尝试实现一个具有两个属性的反弹球： 1.随机变色 2.单击后，速度会增加。在最高速度时，会出现一条消息，单击该消息可将速度重置回默认值我自己设法实现了随机的颜色变化。对于消息，我意识到当我达到最大速度时，我点击消息重置速度。在那之后，球再也不能达到点击来增加速度。有人知道为什么会这样吗 <html> <head> <link rel="stylesheet" type="text/css" href="exe7.css"> <script src="

我尝试实现一个具有两个属性的反弹球： 1.随机变色 2.单击后，速度会增加。在最高速度时，会出现一条消息，单击该消息可将速度重置回默认值

我自己设法实现了随机的颜色变化。对于消息，我意识到当我达到最大速度时，我点击消息重置速度。在那之后，球再也不能达到点击来增加速度。有人知道为什么会这样吗

<html>
<head>
<link rel="stylesheet" type="text/css" href="exe7.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        setInterval(function(){
            $("#ball").css("background", '#' + changeColor());
        },500); 
        var number = 12;
        $("#ball").click(function(){
            number = number -1 ;
            $(this).css('animation-duration', number + 's');

            if (number == 0) {
                $(this).css('animation-duration', '1s');
                $('#message').text('Maximum speed! Click here to restart!');
                $("#message").click(function(){
                    $("#ball").css('animation-duration', '12s');
                });
            }
        });
    });

    function changeColor(){
        return Math.floor(Math.random()*16777215).toString(16);
    }

</script>
</head>

<body>
<div id="ball"></div>
<div id="message"></div>
</body>
</html>


$（文档）.ready（函数（）{
setInterval（函数（）{
$（“#ball”）.css（“背景”，“#”+changeColor（））；
},500); 
var数=12；
$（“#球”）。单击（函数（）{
数字=数字-1；
$（this.css（'animation-duration'，number+'s'）；
如果（数字==0）{
$（this.css（'animation-duration'，'1s'）；
$（“#消息”）.text（'最高速度！单击此处重新启动！'）；
$（“#消息”）。单击（函数（）{
$（“#ball”）.css（'animation-duration'，'12s'）；
});
}
});
});
函数changeColor（）{
返回Math.floor（Math.random（）*16777215）.toString（16）；
}

在number=0的条件下，只需重置number=12即可

    if (number == 0) {
                    $(this).css('animation-duration', '1s');

                    $('#message').text('Maximum speed! Click here to restart!');
                    $("#message").click(function(){
                        $("#ball").css('animation-duration', '12s');
**number=12;**
                    });
                }

因为我有点被你的代码卡住了，所以我想我至少应该发布我的代码片段。Parveen提到的是正确的（重置

数字

变量），但它仍然不会在Chrome上显示动画（例如），因为您忽略了那些特定于浏览器的样式

这应该适用于所有浏览器。还有一些其他小改动，主要是关于动画结束后元素/值的重置：

$（文档）.ready（函数（）{
setInterval（函数（）{
$（“#ball”）.css（“背景”，“#”+changeColor（））；
}, 500);
var数=12；
$（“#球”）。文本（数字）。单击（函数（）{
数字=数字-1；
如果（数字>0）设置动画CSS（数字）；
如果（数字==0）{
$（“#消息”）.text（'最高速度！单击此处重新启动！'）；
$（“#消息”）。单击（函数（）{
数字=12；
$（“#消息”）。文本（“”）；
setAnimCss（数字）；
});
}
});
});
函数changeColor（）{
返回Math.floor（Math.random（）*16777215）.toString（16）；
}
函数setAnimCss（秒）{
$（“#球”）.css({
“动画持续时间”：秒+秒，
“-webkit动画持续时间”：秒+s”，
“-moz动画持续时间”：秒+s”，
“-o-animation-duration”：秒+秒”
}).文本（秒）；
}

#消息{
位置：绝对位置；
顶部：60px；
}
#球{
位置：绝对位置；
宽度：30px；
高度：30px；
背景色：黑色；
颜色：白色；
字号：26px；
顶部：30px；
左边距：自动；
右边距：自动；
边界半径：50%；
-webkit动画：移动线性0s无限交替；
-moz动画：moveY线性0s无限交替；
-o-动画：移动线性0s无限交替；
动画：移动线性0s无限交替；
-webkit动画持续时间：12秒；
-moz动画持续时间：12s；
-o-动画持续时间：12s；
动画持续时间：12秒；
}
@-webkit关键帧移动{
从{
顶部：30px；
}
到{
排名：0；
}
}
@-moz关键帧moveY{
从{
顶部：30px；
}
到{
排名：0；
}
}
@-o-关键帧移动{
从{
顶部：30px；
}
到{
排名：0；
}
}
@关键帧移动{
从{
顶部：30px；
}
到{
排名：0；
}
}

500毫秒的

设置间隔

完全覆盖了12秒的预期持续时间。将其更改为

，以匹配

动画持续时间