Question

我一直在努力想出最简洁的方法，我可以用JavaScript改变背景颜色。（试图获得forEach和更高阶函数的挂起只是为了好玩。）无论如何，这将在页面加载时运行，我认为我非常接近：

function background(){
    var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];
    function change(newcolor){
        document.body.style.backgroundColor=newcolor;
    }
    colorArray.forEach(function(color){
        setTimeout(change(color), 1000);
    });
}

问题是背景颜色仅显示数组中的最后一个元素。我也不确定如何在完成后再次启动forEach循环。谢谢你的帮助！

Answer 1

像这样......也可以......

var colorArray = [“＃14183b”，“＃002e2e”，“＃0d2d40”，“＃173052”，“＃194759”，“＃296b73”];

var count = 0;

    function change() {
        document.body.style.backgroundColor = colorArray[count];
        count++;
        if(count == colorArray.length) {
            count = 0;
        }
    }

    setInterval(function(){
        change();
    }, 1000);

Answer 2

问题是您将change返回的值作为超时处理程序传递，而是需要传递函数引用。

如果您想拥有无限循环，那么您可以使用setInterval()之类的

function background() {
  var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];

  function change() {
    index = index >= colorArray.length ? 0 : index;
    document.body.style.backgroundColor = colorArray[index++];
  }

  var index = 0;
  var interval = setInterval(change, 1000);
}

background();

如果您想使用setTimeout()本身并且只想迭代一次，那么您可以使用

function background() {
  var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];

  function change(newcolor) {
    document.body.style.backgroundColor = newcolor;
  }
  colorArray.forEach(function(color, i) {
    setTimeout(change.bind(undefined, color), i * 1000);
  });
}

background();

Answer 3

改善......

link

JavaScript foreach循环遍历十六进制值数组，使用setTimeout循环遍历背景颜色

3 个答案: