Question

我正在努力让每个方块在用户单击“随机化”按钮后悬停在其上时是不同的颜色。选择randomize函数时没有任何变化。这是我的代码：

function randomSetup(numOfSquares){

    var numSquares = numOfSquares;
    var squareSide = 500 / numSquares;
    var totalSquares = numSquares * numSquares;


    for(var rows = 0; rows < totalSquares; rows++){
    $('<div class="gridSquare"></div>').appendTo('.container')
    }

    var colors = randomColor();

    $('.container').on('mouseenter', '.gridSquare', function(){
        $(this).css('background-color', 'rgb(colors,colors,colors)');
    });

    $('.gridSquare').width(squareSide);
    $('.gridSquare').height(squareSide);

}

function randomColor(){

    return Math.random() * (255 - 0) + 1;
}

Fiddle

Answer 1

这是无效的：

'rgb(colors,colors,colors)'

试试这个：

$('.container').on('mouseenter', '.gridSquare', function(){
    var red = randomColor();
    var green = randomColor();
    var blue = randomColor();

    $(this).css('background-color', 'rgb('+red+','+green+','+blue+')');
});

您还需要对随机数进行舍入：

function randomColor(){
    return Math.round(Math.random() * (255 - 0) + 1);
}

http://jsfiddle.net/oLonz7c0/21/

Answer 2

在这里：http://jsfiddle.net/oLonz7c0/7/

迷幻。

重新生成事件处理程序中的随机颜色，使每个方块的颜色不同。

$('.container').on('mouseenter', '.gridSquare', function(){

    var colors = [];
    colors[0] = Math.round(randomColor());
    colors[1] = Math.round(randomColor());
    colors[2] = Math.round(randomColor());       

    $(this).css('background-color', 'rgb('+colors[0]+','+colors[1]+','+colors[2]+')');
});

Answer 3

你可以试试像

这样的东西

function randomColor(){
     var colors = ["#CCCCCC","#333333","#990099"];                
     var rand = Math.floor(Math.random()*colors.length);   
    //return Math.random() * (255 - 0) + 1;
    return colors[rand];
}

和

var colors ='';



    $('.container').on('mouseenter', '.gridSquare', function(){
        colors = randomColor();
        $(this).css('background-color',colors );
    });

小提琴：http://jsfiddle.net/oLonz7c0/14/

当鼠标进入时，尝试随机化div颜色

3 个答案: