Question

首先，我知道使用CSS来实现这一目标会更简单，但是我真的想尽一切办法用JS循环，因为这对我来说是一个新概念

我想要发生的是让'bg'类循环遍历多种背景颜色

我的代码目前无法正常运行，非常感谢您提供一些指导：）

HTML

<div class="bg"></div>

CSS

.bg {
   width: 100%;
   height: 100%;
}

JS

var bg = document.getElementByClassName('bg');
var colours = ["#CCCDFF", "#BAC7E8", "#D9EEFF", "#BADFE8"];
  for (i = 0; i < colours.length; i++) {
    setInterval(change, 200); 
    function change() {
      bg.style.background = colours;
    }
  }

Answer 1

此行存在3个大问题：

getElementsByClassName()

方法是.getElementsByClassName()。您错过了“ s”。
style返回所有匹配项的节点列表（集合）元素。该集合没有style属性，仅个别元素会。您必须从中提取元素集合，然后访问它的.getElementsByClassName()。
vw返回一个“活动”节点列表，这很痛苦性能相当好。 It's a very old API and shouldn't be used in 2019.

接下来，由于间隔计时器将以指定的间隔连续运行，因此不需要循环。计时器的重复性起到循环作用。

接下来，在CSS中，使用百分比指定元素的大小，但是百分比必须相对于其他值，否则它们将不起作用。如果希望元素与页面一样大，请使用vh和// Don't use `.getElementsByClassName()` var bg = document.querySelector('.bg'); var colours = ["#CCCDFF", "#BAC7E8", "#D9EEFF", "#BADFE8"]; var index = 0; // Will keep track of which color to use function change() { // If we have run out of colors, stop the timer if(index >= colours.length){ clearInterval(timer); } // Set the color and increment the index bg.style.backgroundColor = colours[index++]; } // Start the timer but get a reference to it // so we can stop it later var timer = setInterval(change, 200);（视口宽度和视口高度）。

.bg {
   width: 100vw;
   height: 100vh;
}

<div class="bg"></div>

public static async Task<string> GetRequestBodyAsync(this HttpRequest request,
                                                     Encoding encoding = null)
{
    if (encoding == null) encoding = Encoding.UTF8;
    var body = "";

    request.EnableBuffering();
    if (request.ContentLength == null || !(request.ContentLength > 0) || !request.Body.CanSeek) return body;

    request.Body.Seek(0, SeekOrigin.Begin);
    using (var reader = new StreamReader(request.Body, encoding, true, 1024, true))
        body = await reader.ReadToEndAsync();

    request.Body.Position = 0;
    return body;
}

Answer 2

您错过了s中的getElementsByClassName，并且由于它返回了多个DOM元素，因此您需要使用[0]选择第一个元素，或者按照@ScottMarcus的建议，只需使用querySelector，它将返回与您传递给它的选择器匹配的第一个元素。

当在循环中以相同延迟使用setInterval时，它们都将同时触发。这是使用setTimeout的另一种方法：

var bg = document.querySelector('.bg');
var colours = ["#CCCDFF", "#BAC7E8", "#D9EEFF", "#BADFE8"];

chainColours(colours);

function chainColours(colours) {
  if (colours.length) {
    setColour(colours[0]);
    setTimeout(function() {
      chainColours(colours.slice(1)); // Repeat with all colours except the first one
    }, 200);
  }
}

function setColour(colour) {
  bg.style.background = colour;
}

.bg {
  width: 100px;
  height: 100px;
}

<div class="bg"></div>

在这里，我们使用的是递归函数（一个自我调用的函数）。

我们第一次调用它时，会将整个颜色数组传递给它。 if条件将通过，因为colours.length将是 truthy （不同于0）。

我们使用setColour()函数将bg颜色设置为该数组中的第一种颜色。

然后，使用setTimeout，我们等待200毫秒再次调用该函数，但使用slice传递不包含第一个元素的Array。

它将继续进行下去，直到该传递的数组中没有剩余元素为止。然后，if条件不会通过，它将停止。

Answer 3

const bg = document.querySelector('.bg');
const colours = ["#CCCDFF", "#BAC7E8", "#D9EEFF", "#BADFE8"];

(async () => {
  for (const [index, colour] of colours.entries()) {
    await new Promise(resolve => setTimeout(() => bg.style.background = colour, 200))
  }
})()

使用const（如果不应重新定义变量）或使用let代替var。
我将getElementByClassName替换为querySelector，因为前者返回元素列表，而querySelector返回一个元素
自调用“异步”功能用于使await关键字可用。等待一个异步任务。
异步任务是promise，它会在200毫秒后解决。然后等待下一个异步任务。

Answer 4

setInterval将安排在一定间隔后调用的函数。它是非阻塞的，因此将在函数排队后立即执行。在这种情况下，您计划将所有四种颜色更改安排在200毫秒后发生，因此回调将同时触发。

相反，您可以执行以下操作：setInterval(change, 200 * i)

如何使用JS循环遍历数组以更改背景颜色？

4 个答案: