JavaScriptforeach循环遍历一个十六进制值数组，使用setTimeout循环遍历背景颜色

JavaScript foreach loop through an array of hex values, using setTimeout to loop through background colors

本文关键字：循环 遍历 数组 使用 背景 颜色 setTimeout 一个 JavaScriptforeach 十六进制      更新时间：2023-09-26

我一直在努力想出一种最简洁的方法，可以使用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循环后重新开始。谢谢你的帮助！

像这样。。。也可以。。。

var colorArray=["#14183b"、"#002e2e"、"#0d2d40"、"#173052"、"#194759"、"#296b73"]；

var计数=0；

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

问题是您将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();

改进。。。。

var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];
 var count = 0;
setInterval(function(){
    document.body.style.backgroundColor = colorArray[count];
    count++;
    if(count == colorArray.length) {
        count = 0;
    }
}, 1000);
相关文章：