Question

$(document).ready(function() {
  var randomRed = Math.floor(Math.random() * 255);
  var randomGreen = Math.floor(Math.random() * 255);
  var randomBlue = Math.floor(Math.random() * 255);
  $('p').mouseover(function() {
      $('p').css('color', 'rgb(' + randomGreen + ',' + randomBlue + ',' + randomRed + ')');
  });
  $('p').mouseout(function() {
      $('p').css('color', 'black');
  });
});

我有上面的代码在鼠标悬停时生成随机颜色，然后在mouseout上将其返回黑色，这很好。但是，它会在每次鼠标悬停时生成相同的随机颜色。

如何制作它以便在每次鼠标悬停事件中生成不同的随机颜色？

Answer 1

这是因为您只在加载文档而不是悬停事件时生成颜色一次：

$(document).ready(function() {
    $('p').mouseover(function() {
        var randomRed = Math.floor(Math.random() * 255);
        var randomGreen = Math.floor(Math.random() * 255);
        var randomBlue = Math.floor(Math.random() * 255);
        $('p').css('color', 'rgb(' + randomGreen + ',' + randomBlue + ',' + randomRed + ')');
    });
    $('p').mouseout(function() {
        $('p').css('color', 'black');
    });
});

Answer 2

只需将数字生成声明为函数并在事件中调用它：

$(document).ready(function() {
    function randomNumber(){
        return  Math.floor(Math.random() * 255)
    }

    $('p').mouseover(function() {
        $('p').css('color', 'rgb(' + randomNumber()+ ',' + randomNumber()+ ',' + randomNumber()+ ')');
    });
    $('p').mouseout(function() {
        $('p').css('color', 'black');
    });
});

您还可以使用.hover（）简化事件定义：http://api.jquery.com/hover/

Answer 3

试试这个

$(document).ready(function() {
function randomNumber(){
return  Math.floor(Math.random() * 255)
}

$('p').mouseover(function() {
    $('p').css('color', 'rgb(' + randomNumber()+ ',' + randomNumber()+ ',' +     randomNumber()+ ')');
});
$('p').mouseout(function() {
      $('p').css('color', 'black');
    });
});

在Event上重新生成随机数

3 个答案: