为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

杨魅力 2022-09-23 17:11:03

我正在尝试制作一个静态页面,如果我单击它的任何部分,这个页面会改变它的颜色。我用颜色十六进制代码创建一个对象,但我不知道如何使用它。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;

}


查看完整描述

3 回答

?
慕斯709654

TA贡献1523条经验 获得超5个赞

使用 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;

  }

}


查看完整回答
反对 回复 2022-09-23
?
红糖糍粑

TA贡献1518条经验 获得超4个赞

您可以使用 Math.random(),生成一个随机数,允许您从对象中获取随机背景颜色与 Object.keys()相结合,下面是一个工作片段:

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;

  

}


查看完整回答
反对 回复 2022-09-23
?
慕桂英546537

TA贡献1523条经验 获得超10个赞

您正在为颜色对象分配颜色,这就是为什么这不起作用的原因 - 使用belo代码这将起作用。


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;

}


查看完整回答
反对 回复 2022-09-23
  • 3 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信