如何避免在 JavaScript 中随机生成太黑的颜色？

Question

每当我单击浏览器上的按钮时，它都会显示随机颜色及其 rgb(r,g,b) 代码。我制作了 3 个变量 r、g 和 b，它们使用 Math.floor(Math.random()*256) 的基本逻辑生成从 0 到 255 的随机数；

我的问题是有时生成的随机颜色太暗，与它们一起显示的 rgb 代码是黑色的。

我尝试编写一个逻辑，每当 r+g+b < 300 时，切换 h1 元素的 class，它的属性颜色为白色。

const h1 = document.querySelector('h1');
const button = document.querySelector("button");
h1.classList.add('h1');
//if (r+g+b < 500)
button.addEventListener('click', () => {
    changeColor();
});

const changeColor = (() => {
    const newColor = randomColor();
    document.body.style.backgroundColor = newColor;
    h1.innerText = newColor;
    }
);

const randomColor = (() => {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgb(${r}, ${g}, ${b})`;
})

Answer 1

一种简单的方法是使 r、g、b 变量具有更宽的范围，以便它们可用于在更改背景颜色的同一位置进行 <500 测试。

const h1 = document.querySelector('h1');
const button = document.querySelector("button");
let r, g, b;
h1.classList.add('h1');
button.addEventListener('click', () => {
  changeColor();
});

const changeColor = (() => {
  const newColor = randomColor();
  document.body.style.backgroundColor = newColor;
  if (r + g + b < 500) h1.style.color = 'white';
  else h1.style.color = 'black';
  h1.innerText = newColor;
});

const randomColor = (() => {
  r = Math.floor(Math.random() * 256);
  g = Math.floor(Math.random() * 256);
  b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
})

<h1></h1>
<button>click me</button>

Answer 2

好吧，你必须把你的 if 放在这个函数中 (randomColor )，当为 (r,g,b) 生成值时，你是否会在每次值更改时再次检查新值.

const randomColor = (() => {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    if(r+g+b < 300){
      h1.classList.add('h1');
    }
    return `rgb(${r}, ${g}, ${b})`;
})

Answer 3

试试这个：

  const changeColor = (() => {
        const newColor = randomColor();

        document.body.style.backgroundColor = newColor[1];
        h1.innerText = newColor[1];

       const sumColor = newColor[0];

        if (sumColor < 300){
            h1.style.color = white;
        }else{
            h1.style.color = black;

        }



    }
    );

    const randomColor = (() => {
        const r = Math.floor(Math.random() * 256);
        const g = Math.floor(Math.random() * 256);
        const b = Math.floor(Math.random() * 256);
        const sum = r+g+b;
        return [sum,`rgb(${r}, ${g}, ${b})`]; //returning array
        
 
    })

如何避免在 JavaScript 中随机生成太黑的颜色？

How to avoid generating too black colors at random in JavaScript?

javascript

random

colors

rgb