Question

大家。我在HTML / CSS / Javascript中大约一周大的初学者。我为一个页面编写了这个代码，该页面用于在鼠标在页面上移动时根据“随机”RGB值修改颜色，其中alpha值固定为1，始终为。

<!DOCTYPE html>
<head>
  <script src='https://code.jquery.com/jquery-1.10.2.js'></script>
</head>
<body>
  <script>
    $('*').mousemove(function() {
      var red = Math.floor(Math.random() * 255);
      var green = Math.floor(Math.random() * 255);
      var blue = Math.floor(Math.random() * 255);

      var rgba = 'rgba(' + red + ',' + blue + ',' + green + ')';
      $('*').css('background', rgba);
    });
  </script>
</body>

我尝试过Chrome，Chromium，Vivaldi，Opera甚至是Internet Explorer，所有这些浏览器都显示了一个网页，其默认的白色背景页面对鼠标移动没有反应。

Answer 1

您的代码的主要问题是您正在设置RGBA颜色，但您忘记提供A值。

我还建议您使用document来监听mousemove事件并更新background-color的{{1}}。应尽可能避免使用通配符body选择器，因为它很慢 - 尤其是在附加事件处理程序时。

＆＃13;

$(document).mousemove(function() {
  var red = Math.floor(Math.random() * 255);
  var green = Math.floor(Math.random() * 255);
  var blue = Math.floor(Math.random() * 255);

  var rgba = 'rgba(' + red + ',' + blue + ',' + green + ',1)'; // note '1' at the end
  $('body').css('background', rgba);
});

＆＃13;

这个片段应该有癫痫警告......

解释为什么这个HTML只适用于Firefox而不是任何其他浏览器？

1 个答案: