Question

你好我想让多个球飞过屏幕随机速度/位置并改变随机颜色。我在javaScript / jQuery中编写它。

我有一个点（div）随机移动并改变颜色，但不能创建另一个具有相同功能的div - 你有建议吗？（我是一个非常的菜鸟，刚刚开始使用javaScript / jQuery）

我的代码：

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>balls</title>

<style>

.flip
{
width: 200px;
height: 200px;
border-radius:300px;
position:absolute;
}
.flip2
{
width: 100px;
height: 100px;
border-radius:300px;
position:absolute;
}

</style>

</head>

<body>

<div class="flip"></div>


<div class="flip2"></div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<script>

$(document).ready(function(){
    animateDiv();    
});


function makeNewPosition(){
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh,nw];       
};

function animateDiv(){
    var newq = makeNewPosition();
    $('.flip').animate({ top: newq[0], left: newq[1] }, function(){
      animateDiv(); 

    $(this).css("background-color", getRandomColor());         
    });   
};

function animateDiv(){
    var newq = makeNewPosition();
    $('.flip2').animate({ top: newq[0], left: newq[1] }, function(){
      animateDiv(); 

    $(this).css("background-color", getRandomColor());         
    });

};

function getRandomColor() { 
var letters = '0123456789ABCDEF'.split(''); 
var color = '#'; 
for (var i = 0; i < 6; i++ ) 
{ color += letters[Math.floor(Math.random() * 16)]; 

    } 

return color; 

};

</script>

</body></html>

Answer 1

JavaScript中的函数名称必须是唯一的。因此，您的第二个animateDiv()会覆盖第一个。{/ p>

你可以将两者结合起来，如下所示：

function animateDiv(){
  var newq = makeNewPosition();
  $('.flip').animate({ top: newq[0], left: newq[1] }, function(){
    animateDiv(); 
    $(this).css("background-color", getRandomColor());         
  });   
  var newq = makeNewPosition();
  $('.flip2').animate({ top: newq[0], left: newq[1] }, function(){
    animateDiv(); 
    $(this).css("background-color", getRandomColor());         
  });
};

JSFiddle http://jsfiddle.net/qbw6hsbj/

Answer 2

一个选项是创建一个可以像对待类一样对待的函数：

function flyingObject() {
    this.$div = [];
    return {
        $div: this.$div,
        animate: animateDiv
    }

    //Public Functions
    function animateDiv(){
        var newq = makeNewPosition();
        this.$div.animate({ top: newq[0], left: newq[1] }, function(){
            this.animate();
            this.$div.css("background-color", getRandomColor());         
        }.bind(this));   
    };

    //Private Functions
    function makeNewPosition(){
        //...     
    };

    function getRandomColor() { 
        //...
    } 
}

你可以这样实例化它：

var div1 = new flyingObject();
div1.$div = $(".flip");
div1.animate();

请参阅小提琴：http://jsfiddle.net/cLqgs4dn/

旁注：由于animateDiv正在使用回调函数，我使用了bind，因此回调函数上下文中的this仍然是对象

Answer 3

我会在这里实施OOPS：

JSFiddle - http://jsfiddle.net/qbw6hsbj/2/

var Ball = function(element, nextPostion) {
    this._element = element;

    this.makeNewPosition = function() {
        var h = $(window).height() - nextPostion;
        var w = $(window).width() - nextPostion;

        var nh = Math.floor(Math.random() * h);
        var nw = Math.floor(Math.random() * w);

        return [nh, nw];
    }

    this.getRandomColor = function() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];

        }

        return color;
    }

    this.animateDiv = function() {

        var newq = this.makeNewPosition(),
            self = this;

        this._element.animate({
            top: newq[0],
            left: newq[1]
        }, function() {
            self.animateDiv();

            self._element.css("background-color", self.getRandomColor());
        });

    }

}
$(document).ready(function() {

    var ball = new Ball($('.flip'), 50);
    ball.animateDiv();

    var ball2 = new Ball($('.flip2'), 40);
    ball2.animateDiv();


});

多个彩球jQuery

3 个答案: