使用JS更改不同颜色的主体背景

Question

所以我是JavaScript的新手，我想制作一个按钮，当按下时可以更改主体背景颜色。但它没有起作用。这是我的密码。但它没有起作用。。

function color (){
var color = ["#02245c", "green", "blue", "red", "yellow"];
var i;
for (var i = 0; i < color.length; i++) {
color[i];
document.body.style.background = color[i];
}
}

Answer 1

祝贺学习JS。

为您构建了一个解决方案，这是我能想到的最简单的方法。希望您喜欢。

const button = document.querySelector('button');
var currentColorIndex = 0;
button.onclick = () => changeColor();
function changeColor () {
var color = ["#02245c", "green", "blue", "red", "yellow"];
// You dont need a loop, this is what will change the color every time the function gets called.
if( currentColorIndex < color.length - 1 ) {
currentColorIndex++;
} else {
currentColorIndex = 0;
}

button.style.background = color[currentColorIndex];
}

<!-- HTML expanding (Emmet):
- type html:5 and press Tab;
- type div>h1#header and press Tab;
-->
<button>Click me</button>

Answer 2

下面的片段演示了它的工作原理。它将文档背景更改为您在片段中提供的所有颜色，但只有最后一种颜色(黄色(保持可见。

color()
function color (){
var color = ["#02245c", "green", "blue", "red", "yellow"];
var i;
for (var i = 0; i < color.length; i++) {
color[i];
document.body.style.background = color[i];
}
}

如果你想更慢地完成它们，你需要设置某种setInterval():

color();
function color (){
let i=0, color = ["#02245c", "green", "blue", "red", "yellow"], l=color.length;
document.body.style.background = color[i];
setInterval(function(){
document.body.style.background = color[++i%l];
}, 1000)
}

好吧，如果你想通过点击按钮来触发它，你可以使用以下片段：

((w,fn)=>{
let i=0, color = ["#02245c", "green", "blue", "red", "yellow"], l=color.length;
document.body.style.background = color[i];
w[fn]=()=>document.body.style.background = color[++i%l];
})(window,'changeColor');
document.querySelector('button').onclick=changeColor;

<button>change colour</button>

我的最后一个片段可能看起来有点"过于复杂"；。我把所有东西都放在IIFE(即时调用的函数表达式(中。这提供了使用"；静态"；表示当前颜色的变量CCD_ 2。此变量只能从同一IIFE中定义的函数changeColor()中访问。这样做可以使您的全局范围免受任意全局变量和您不想干涉的东西的影响。

Answer 3

在没有看到html或其他代码的情况下，我的猜测是您的button元素上缺少onclick="color()"，或者忘记在代码中的某个位置注册事件侦听器。

如果您的按钮的id为myButton，那么您的事件侦听器可以注册如下：

const button = document.querySelector('#myButton');
button.addEventListener('click', color);

此外，您不需要在循环之前声明var i;，它在循环本身中声明