Question

我正在尝试获得以下信息： rbg（random，random，random）;

现在，当我将Math.floor(Math.random() * 255) + 1放入该区域时，它可以工作，但是由于某些原因，大多数数字都停留在255，并且很少更改。

我的代码是：

function colorGen() {   
  document.getElementById("color1").style.backgroundColor = 'rgb('+ 
  Math.floor(Math.random() * 255) + 1 + ',' + Math.floor(Math.random() * 255) + 1 
  +',' + Math.floor(Math.random() * 255) + 1 +')';
}

当我在（( Math.floor(Math.random() * 255) + 1 )-周围加上方括号（）时，效果会更好。

为什么会这样？

Answer 1

@Xufox的评论中的答案正确。为了清楚起见，您需要稍微重组代码（并且还要修复由于+1而使任何通道永远都不会为零的错误）：

function colorGen() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  document.getElementById("color1").style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}

Answer 2

当您在字符串中使用+1时，它将生成为字符串而不是数学表达式。当您使用()时，它将生成为数学表达式。

我的建议：

使用参数来随机设置颜色

function colorGen() {   
  var color1=Math.floor(Math.random() * 255) + 1;
  var color2=Math.floor(Math.random() * 255) + 1;
  var color3=Math.floor(Math.random() * 255) + 1;
  document.getElementById("color1").style.backgroundColor = 'rgb('+ color1
   + ',' +  color2
  +',' + color3 +')';
}

<button id="color1" onclick="colorGen()">click me to change color</button>

Answer 3

当您“添加” 1时，它会以字符串形式连接，因为您以"rgb(" +开头，结果是“ string {{1} } number ”将是另一个字符串。用括号括起来的数字表达式使+运算符进行加法运算而不是串联运算。

获得+的原因是，您生成的数字最终看起来像这样：

11 21 31 41 … 2531 2541 2551设置器将8位值（从0到255）设置为最大backgroundColor（最小255）。这意味着，设置0会导致element.style.backgroundColor = "rgb(10000, -10000, 128)"的{{1}}

因此，当backgroundColor生成一个从"rgb(255, 0, 128)"到Math.floor(Math.random() * 255)的数字时，所得的最高数字将成为1，该数字低于25。其他任何值-，即从251到255-得出的值都高于26，因此它会自动变成255。

括号使算术表达式在连接之前求值。

带有JavaScript的随机RGB颜色生成器

3 个答案: