Question

我正在尝试使用javascript循环显示背景颜色，但它只会返回最后一个蓝色。

我试图浏览本网站上的不同答案，但是我是javascript新手，无法理解他们在说什么。有人有答案吗？

function background() {
  const bg = document.querySelector('header');
  const colors = ['red', 'orange', 'yellow', 'blue'];

  for (let i = 0; i < colors.length; i++) {
    console.log(colors[i])
    bg.style.backgroundColor = colors[i];
  }
}

background();
setInterval(background, 5000);

<header style="width:100px; height:100px"></header>

Answer 1

那么console.log会全部打印出来，但是只有最后一个保存了吗？

因为您要在循环内将其覆盖，并且循环像立即运行一样（或者真的非常快，无法通过肉眼发现）。这意味着，由于存在一个for循环，setInterval根本没有做任何事情。

实际发生的事情：

您没有这样做： 1，等待5秒，2，等待5s等。
相反，您要做的是： 1234，等待5秒，1234，等待5秒，等等。

让我们看一下代码中的示例解决方案：

let i = 0;
// move variable i out of the function
// so it is not reset every time the function is run

function background () {
    // your code, nothing new here
    const bg = document.querySelector('header');
    const colors = ['red', 'orange', 'yellow', 'blue']
    bg.style.backgroundColor = colors[i];

    // then to have it change
    if (i < (colors.length) { i++; } // increase i+1 until we have reached max
    // i++ is shorthand for i = i + 1
    else i = 0;
    // and if have, reset it (that's why it is outside the function)
    // if it were inside it, it would reset every time the function runs
}
setInterval(background, 5000);
background();

Answer 2

我认为您希望这样的事情-

var colorIndex = 0;

function background () {
    const bg = document.querySelector('.header');
    const colors = ['red', 'orange', 'yellow', 'blue'];
	bg.style.background = colors[((colorIndex++) % colors.length)];
}

background();
setInterval(background, 1000);

.header {
  width: 100px;
  height: 150px;
  background: gray;
}

<div class="header"></div>

注意： 行((colorIndex++) % colors.length)表示我声明了一个名为colorIndex = 0的索引变量，并在每个时间间隔递增，如果它超过了颜色数组的长度，则用colors.length对其取模，使其再次为零。

Answer 3

这与您的for（）循环有关，

您正在遍历包含颜色的数组的所有索引并设置bg.style.backgroundColor = colors [i]，但是随后的for（）循环会注意到i仍然

它仅显示自循环结束以来“ blue”的最后一个值。 :) for循环的运行条件直到达到该条件时才停止。

也许增加数组值而不是遍历它。不过，目前尚不确定最好的方法。

（虽然是编程新手，所以请先听其他人讲，实际上是在5分钟前刚刚注册了一个Stack Overflow帐户哈哈）

Answer 4

我将在没有for循环的情况下实现该功能。相反，您可以在每个函数调用索引器值时递增。完成最后一项后，将值重置为零，然后从头开始。因此，从技术上讲，在这种情况下，您可以像循环那样考虑setInterval，但您需要在每次迭代中处理索引器值。

尝试以下操作：

let i = 0;

function background () {
    const bg = document.querySelector('header');
    const colors = ['red', 'orange', 'yellow', 'blue']
    bg.style.backgroundColor = colors[i];
   
    if (i === colors.length - 1) i = 0;
    else i++;
}

setInterval(background, 1000);

background();

<header>This is the header</header>

我希望这会有所帮助！

Answer 5

您只得到最后一个，因为您需要使用setTimeout()函数或setInterval()函数。它只返回最后一个，因为它循环时会一直持续到最后一个，而不会停止。

Answer 6

是否要每5秒更改一次背景色？在这种情况下，请使用以下代码段

var colorIndex = 0;

function background() {
  const bg = document.querySelector('header');
  const colors = ['red', 'orange', 'yellow', 'blue']

  bg.style.backgroundColor = colors[colorIndex++];

  //resetting the index to 0 to repeat the colors after reaching end of colors
  if (colorIndex >= colors.length) {
    colorIndex = 0;
  }
}

setInterval(background, 5000)

background();

<header style="width:100px; height:100px"></header>

遍历数组并仅获取最后一个项目？

6 个答案: