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

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

使用&nbsp;Object.keys（）&nbsp;方法获取颜色键，每次单击时，如果索引获得颜色大小，则递增索引，然后将索引设置为 0。请尝试此示例document.addEventListener("click", changeBground);let index = 0;const colors = {&nbsp; red: "#FF0000",&nbsp; orange: "#FF7F00",&nbsp; yellow: "FFFF00",&nbsp; green: "#00FF00",&nbsp; aqua: "#00FFFF",&nbsp; blue: "#0000FF",&nbsp; purple: "#8B00FF",};function changeBground() {&nbsp; const keys = Object.keys(colors);&nbsp; document.body.style.backgroundColor = colors[keys[index]];&nbsp; if (index < keys.length) {&nbsp; &nbsp; index += 1;&nbsp; } else {&nbsp; &nbsp; index = 0;&nbsp; }}下面是一个示例document.addEventListener("click", changeBground);let index = 0;const colors = {&nbsp; red: "#FF0000",&nbsp; orange: "#FF7F00",&nbsp; yellow: "FFFF00",&nbsp; green: "#00FF00",&nbsp; aqua: "#00FFFF",&nbsp; blue: "#0000FF",&nbsp; purple: "#8B00FF",};function changeBground() {&nbsp; const keys = Object.keys(colors);&nbsp; document.body.style.backgroundColor = colors[keys[index]];&nbsp; if (index < keys.length) {&nbsp; &nbsp; index += 1;&nbsp; } else {&nbsp; &nbsp; index = 0;&nbsp; }}

Answer 2

您可以使用&nbsp;Math.random（），生成一个随机数，允许您从对象中获取随机背景颜色与&nbsp;Object.keys（）相结合，下面是一个工作片段：document.addEventListener("click", changeBground);&nbsp;var colors = {&nbsp; &nbsp; red: "#FF0000",&nbsp; &nbsp; orange: "#FF7F00",&nbsp; &nbsp; yellow: "#FFFF00",&nbsp; &nbsp; green: "#00FF00",&nbsp; &nbsp; aqua: "#00FFFF",&nbsp; &nbsp; blue: "#0000FF",&nbsp; &nbsp; purple: "#8B00FF",};const colorKeys = Object.keys(colors);function getRandomInt(min, max) {&nbsp; min = Math.ceil(min);&nbsp; max = Math.floor(max);&nbsp; return Math.floor(Math.random() * (max - min)) + min;}function changeBground() {&nbsp; const randKey = getRandomInt(0, colorKeys.length);&nbsp; console.log(randKey, colorKeys[randKey] );&nbsp; const color = colors[colorKeys[randKey]];&nbsp; document.body.style.backgroundColor = color;&nbsp;&nbsp;}

Answer 3

您正在为颜色对象分配颜色，这就是为什么这不起作用的原因 - 使用belo代码这将起作用。document.addEventListener("click", changeBground);&nbsp;var counter = 0;var colors = ['red', 'orange', 'yellow', 'green', 'aqua', 'blue', 'purple'];function changeBground() {&nbsp; document.body.style.background = colors[counter];&nbsp; counter = counter < colors.length -1 ? counter + 1 : 0;}如果你想随机更新数组中的任何颜色，请使用下面的函数而不是上面的一个 -function changeBground() {&nbsp; var color = colors[Math.floor(Math.random() * colors.length)];&nbsp; document.body.style.background = color;}