Question

我正在尝试实现一个弹跳球，它有2个属性： 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>

Answer 1

您需要在number = 0

的条件后重置数值= 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;**
                    });
                }

Answer 2

由于我被困在你的代码中，我以为我至少会发布我的代码片段。 Parveen所提到的内容是正确的（重置number变量），但由于您将这些特定于浏览器的样式保留下来，因此它仍无法在Chrome上制作动画（例如）。

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

$(document).ready(function() {
  setInterval(function() {
    $("#ball").css("background", '#' + changeColor());
  }, 500);
  var number = 12;
  $("#ball").text(number).click(function() {
    number = number - 1;
    if (number > 0) setAnimCss(number);
    if (number == 0) {
      $('#message').text('Maximum speed! Click here to restart!');
      $("#message").click(function() {
        number = 12;
        $('#message').text('');
        setAnimCss(number);
      });
    }
  });
});

function changeColor() {
  return Math.floor(Math.random() * 16777215).toString(16);
}

function setAnimCss(seconds) {
  $("#ball").css({
    'animation-duration': seconds + 's',
    '-webkit-animation-duration': seconds + 's',
    '-moz-animation-duration': seconds + 's',
    '-o-animation-duration': seconds + 's'
  }).text(seconds);
}

#message {
  position: absolute;
  top: 60px;
}
#ball {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: black;
  color: white;
  font-size: 26px;
  top: 30px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  -webkit-animation: moveY linear 0s infinite alternate;
  -moz-animation: moveY linear 0s infinite alternate;
  -o-animation: moveY linear 0s infinite alternate;
  animation: moveY linear 0s infinite alternate;
  -webkit-animation-duration: 12s;
  -moz-animation-duration: 12s;
  -o-animation-duration: 12s;
  animation-duration: 12s;
}
@-webkit-keyframes moveY {
  from {
    top: 30px;
  }
  to {
    top: 0;
  }
}
@-moz-keyframes moveY {
  from {
    top: 30px;
  }
  to {
    top: 0;
  }
}
@-o-keyframes moveY {
  from {
    top: 30px;
  }
  to {
    top: 0;
  }
}
@keyframes moveY {
  from {
    top: 30px;
  }
  to {
    top: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="ball"></div>
<div id="message"></div>

jQuery重启后，不再对点击做出反应

2 个答案: