如何在javascript函数中随机更改背景颜色

Question

我将不胜感激任何帮助。我想在每次背景颜色变暗时更改按钮的文本颜色。我一直在尝试以下代码的其他变体。我似乎无法让 newColor 工作。预先感谢您的帮助。

const button = document.querySelector('button');
const h1 = document.querySelector('h1');
button.addEventListener('click', () => {
    const newColor = randomColor();
    document.body.style.backgroundColor = newColor;
    h1.innerText = newColor;
})


let newColor;

const randomColor = () => {
    const r = Math.floor(Math.random() * 255);
    const g = Math.floor(Math.random() * 255);
    const b = Math.floor(Math.random() * 255);
    newColor =  r * 0.299 + g * 0.587 + b * 0.114
    if(newColor > 186) {
        newColor = 'black';
    } else {
        newColor = 'white';
    }
    return `rgb(${r}, ${g}, ${b})`;
}

我尝试制作自己的函数，我尝试在函数外部放置 if 语句。

Answer 1

您可以使用以下代码：

var newRandomColor = Math.floor(Math.random()*16777215).toString(16)

此代码适用于生成随机颜色。希望对你有帮助

Answer 2

对于具体的 RGB 颜色代码，您可以使用：

function RGBcolor() {
  var R = Math.floor(Math.random() * 256);
  var G = Math.floor(Math.random() * 256);
  var B = Math.floor(Math.random() * 256);
  var randomcolor = "rgb(" + R + "," + G + "," + B + ")";  
  console.log(randomcolor);
}

RGBcolor();

希望也有帮助！

Answer 3

每次页面加载或刷新时使用随机十六进制颜色更改背景

const hexDigits = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "a", "b", "c", "d", "e", "f"];

function generateRandomColor(hexDigits) {
  let bgColor = "#";

  for (let i = 0; i < 6; i++) {
    const index = Math.floor(Math.random() * hexDigits.length);
    bgColor += hexDigits[index];
  }
  return bgColor;
}

function changeBgColor() {
  const color = generateRandomColor(hexDigits);
  document.body.style.backgroundColor = color;
}

window.addEventListener("load", changeBgColor());

Answer 4

这个功能完美运行。

function clickChangeBg() {

    let randomColor = Math.floor(Math.random()*16777215).toString(16);
    let rgbValue = "#" + randomColor;
    document.body.style.backgroundColor = rgbValue;
}