使用Javascript更改背景颜色无法正常工作

我已经设置了一个5种颜色的数组，我希望每5秒自动旋转/显示一次作为我的背景色。我的Javascript代码可以工作，但是我不明白它是如何显示颜色的

正如你们将看到的，我希望首先显示绿色，然后是红色、蓝色、橙色和银色。按这个顺序。然而，当我加载页面时，它是完全随机的。例如，当页面加载时，它将不显示任何内容，然后蓝色、红色、蓝色、橙色、红色、银色等…完全随机。为什么会这样？我做错了什么

function changebackground() { 
var colors = ["green", "red", "blue", "orange", "silver"];

        setInterval(function() { 
            var bodyback = Math.floor(Math.random() * colors.length);
            var selectedcolor = colors[bodyback];
            document.body.style.background = selectedcolor;
        }, 5000);
    }
window.onload = changebackground();

---

这里有一个随机函数，它导致了它

var bodyback = Math.floor(Math.random() * colors.length);
            var selectedcolor = colors[bodyback];

---

当您在代码中选择一个随机索引时，需要逐个元素遍历数组元素：

var bodyback = Math.floor(Math.random() * colors.length);

相反，您需要通过存储当前索引并增加它来迭代可能的索引：

function changebackground() { 
    var colors = ["green", "red", "blue", "orange", "silver"];
    var curIndex = 0;

    setInterval(function() { 
        var selectedcolor = colors[curIndex];
        document.body.style.background = selectedcolor;
        curIndex = (curIndex + 1) % colors.length;
    }, 5000);
}
window.onload = changebackground();

---

请确保修改了当前索引的（%），以便在到达数组末尾时，它会重置为开头。

我可能会这样做

var colors=["green", "red", "blue", "orange", "silver"];
var bodyback=0;

setInterval(function(){
document.body.style.backgroundColor=colors[bodyback];
if(bodyback!=4){
   bodyback++;
}else{
   bodyback=0;}
},5000)

---

我删除了代码的这一部分，并将“document.body.style.background=selectedcolor；”部分替换为“document.body.style.background=colors；”现在它根本不起作用。