使用Javascript更改背景顏色無法正常工作

Question

我已經設置了一個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();

Answer 1

你在這里有一個隨機函數導致它

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

你會想要逐個元素地遍歷數組元素

Answer 2

您正在代碼中選擇隨機索引：

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();

確保修改（％）當前索引，以便在到達數組末尾時將其重置為開頭。

Answer 3

我可能會做這樣的事情。

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)