如何制作一个每次点击都会改变背景颜色的循环？

Question

我正在尝试制作一个静态页面，如果我点击它的任何部分，这个页面就会改变它的颜色。我使用颜色十六进制代码创建了一个对象，但我不知道如何使 document.body.style.background 使用它。

另外，我希望程序能够遵循这种顺序，而不仅仅是抛出随机颜色。对不起，如果我看菜鸟，但我是编程新手。我在自学

如果我这样写就可以了：

function changeBground() {
  var colors;
  document.body.style.background = "#FF0000";
}

但这只是一种颜色，不是我的目标

这是我的完整代码：

document.addEventListener("click", changeBground); 
var colors = {
    red: "#FF0000",
    orange: "#FF7F00",
    yellow: "FFFF00",
    green: "#00FF00",
    aqua: "#00FFFF",
    blue: "#0000FF",
    purple: "#8B00FF",
};

function changeBground()
{
  document.body.style.background = colors;
}

Answer 1

使用Object.keys() 方法获取颜色键，并在每次单击时增加索引，如果索引获得颜色大小，然后将索引设置为 0。请尝试此示例

document.addEventListener("click", changeBground);
let index = 0;
const colors = {
  red: "#FF0000",
  orange: "#FF7F00",
  yellow: "FFFF00",
  green: "#00FF00",
  aqua: "#00FFFF",
  blue: "#0000FF",
  purple: "#8B00FF",
};

function changeBground() {
  const keys = Object.keys(colors);

  document.body.style.backgroundColor = colors[keys[index]];

  if (index < keys.length) {
    index += 1;
  } else {
    index = 0;
  }
}

这里是一个例子

document.addEventListener("click", changeBground);
let index = 0;
const colors = {
  red: "#FF0000",
  orange: "#FF7F00",
  yellow: "FFFF00",
  green: "#00FF00",
  aqua: "#00FFFF",
  blue: "#0000FF",
  purple: "#8B00FF",
};

function changeBground() {
  const keys = Object.keys(colors);

  document.body.style.backgroundColor = colors[keys[index]];

  if (index < keys.length) {
    index += 1;
  } else {
    index = 0;
  }
}

Answer 2

您可以使用Math.random()，生成一个随机数，让您可以从对象中获取随机背景颜色，并结合Object.keys()，这是一个有效的sn-p：

document.addEventListener("click", changeBground); 
var colors = {
    red: "#FF0000",
    orange: "#FF7F00",
    yellow: "#FFFF00",
    green: "#00FF00",
    aqua: "#00FFFF",
    blue: "#0000FF",
    purple: "#8B00FF",
};

const colorKeys = Object.keys(colors);

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

function changeBground() {
  const randKey = getRandomInt(0, colorKeys.length);
  console.log(randKey, colorKeys[randKey] );
  const color = colors[colorKeys[randKey]];
  document.body.style.backgroundColor = color;
  
}

Answer 3

您正在将颜色对象分配给颜色，这就是为什么这不起作用 - 使用贝洛代码这将起作用。

document.addEventListener("click", changeBground); 
var counter = 0;
var colors = ['red', 'orange', 'yellow', 'green', 'aqua', 'blue', 'purple'];

function changeBground() {
  document.body.style.background = colors[counter];
  counter = counter < colors.length -1 ? counter + 1 : 0;
}

如果你想随机更新数组中的任何颜色，请使用下面的函数而不是上面的函数 -

function changeBground() {
  var color = colors[Math.floor(Math.random() * colors.length)];
  document.body.style.background = color;
}