Question

我对Javascript相对较新，我正试图制作一个流星以随机速率下降的简单游戏。我的问题是，每次for循环播放时，meteor div应该将数学添加到距离顶部的距离，但我不知道如何做到这一点。看一下当前的代码，你会发现#meteor的动画是数学＆＃39;。这段代码不起作用。有关如何使其工作的任何想法？

谢谢，投票表示赞赏！

var math = Math.round(Math.random * 5)
        for(var i = 0; i <= height / 3; i++) {
            $('#meteor').animate({top: "+=math"}, 1)
        }

Answer 1

有几件事。每当用引号括起JS中的任何内容时，它都被视为一个字符串，所以即使你有变量math，因为它在引号中，它被视为字符串'math'。另一件事是+=必须有一些东西才能使用，并且不能像你想要的那样与jQuery一起使用。

要简化代码的工作，请将其更改为：

var math = Math.round(Math.random * 5)
for(var i = 0; i <= height / 3; i++) {
    // Gives the 'top' value for meteor. parseInt removes the
    // 'px' that will show up on the end and return type int
    var meteorTop = parseInt($('#meteor').css('top')); 
    $('#meteor').animate({top: meteorTop + math}, 1);
}

也就是说，你的动画会重叠，你会想要在动画之间等待，否则它们会互相触发而不能按照你想要的方式工作。

只有一种相关的，+=有效的情况是这样的：

var int = 0;
int += 2; // int = 2; this is the same as: int = int + 2;
int += 3; // int = 5; this is the same as: int = int + 3;

你应该为自己添加相同的类型，JS会为你做一些解释，但是你应该总是使用相同类型的+=。 string += string或int += int。

Answer 2

尝试遵循一个

 for(var i = 0; i <= height / 3; i++) {
    var math = Math.round(Math.random * 5)
    $('#meteor').animate({top: "+="+math}, 1);
 }

Answer 3

如果您尝试在每次迭代时通过 math 递增 top 的值，那么您需要以下内容：

  $('#meteor').animate({top: math * i}, 1)

在javascript css属性中使用变量

3 个答案: