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

【问题标题】：Changing background color with Javascript not working properly使用 Javascript 更改背景颜色无法正常工作
【发布时间】：2014-04-12 22:11:14
【问题描述】：

我设置了一个包含 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();

【问题讨论】：

标签： javascript colors background

【解决方案1】：

您正在代码中选择一个随机索引：

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

确保修改 (%) 当前索引，以便在到达数组末尾时重置到开头。

【讨论】：

【解决方案2】：

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

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

你会想要逐个元素地遍历数组

【讨论】：

我删除了那部分代码并替换了“document.body.style.background = selectedcolor;”部分与“document.body.style.background = colors;”现在它根本不起作用。

【解决方案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)

【讨论】：