使用单个按钮，如何按列出的顺序更改 div 背景颜色，而不是随机更改

Question

我正在使用下面的代码来更改按钮单击时 div 的背景颜色。 它随机选择颜色（math.random），但我希望它按列出的顺序选择颜色（红色>蓝色>黄色>等）。 谁能帮我这个？ 提前致谢！

<style>
#changecolor2 {
    height: 100px;
    width: 100px;
}
</style>

<script>
var colors = ["red", "blue", "yellow", "green", "orange", "black", "cyan", "magenta"]
function changeColor() {
    var col = document.getElementById("changecolor");
    col.style.backgroundColor = colors[Math.floor((Math.random()*8)+1)];
}
</script>

<body>
<div id="changecolor2"></div>
<button onclick="changeColor();">change color</button>
</body>

Answer 1

只需维护一个跟踪当前颜色索引的变量即可。 如果它到达最后一种颜色，只需返回到第一种颜色。

var current = -1;
var colors = ["red", "blue", "yellow", "green", "orange", "black", "cyan", "magenta"]
function changeColor() {

    if(current > colors.length-1){
        current = 0;
    } else {
        current++;
    }

    var col = document.getElementById("changecolor");
    col.style.backgroundColor = colors[current];
}

Answer 2

var colors = ["red", "blue", "yellow", "green", "orange", "black", "cyan", "magenta"];
var colorIndex = 0;
function changeColor() {
    var col = document.getElementById("changecolor2");
    if( colorIndex >= colors.length ) {
        colorIndex = 0;
    }
    col.style.backgroundColor = colors[colorIndex];
    colorIndex++;
}
window.onload = changeColor;

小提琴： http : //jsfiddle.net/aslancods/6S46U/

Answer 3

<script type="text/javascript">
    var count = 0;
    var colors = ["red", "blue", "yellow", "green", "orange", "black", "cyan", "magenta"]
    function changeColor() {
        if(count >= colors.length-1){
            count = 0;
        } else {
            count++;
        }

        document.getElementById("changecolor2").style.backgroundColor = colors[count];
    }
</script>

这将对您有所帮助，并将以循环方式更改背景颜色。

Answer 4

var colors = ["red", "green", "blue"];
var count = 0;
$(".button").click(function() {
    $("body").css("background-color", colors[count]);
    count++
    count >= colors.length ? count = 0: count ;
})

使用单个按钮，如何按列出的顺序更改 div 背景颜色，而不是随机更改

问题描述

4 个解决方案

解决方案1
0 2014-04-19 16:27:36

解决方案2
0 已采纳 2014-04-19 16:31:13

解决方案3
0 2014-04-19 16:40:49

解决方案4
0 2018-03-26 13:09:13

使用单个按钮，如何按列出的顺序更改 div 背景颜色，而不是随机更改

问题描述

4 个解决方案

解决方案1 0 2014-04-19 16:27:36

解决方案2 0 已采纳 2014-04-19 16:31:13

解决方案3 0 2014-04-19 16:40:49

解决方案4 0 2018-03-26 13:09:13

解决方案1
0 2014-04-19 16:27:36

解决方案2
0 已采纳 2014-04-19 16:31:13

解决方案3
0 2014-04-19 16:40:49

解决方案4
0 2018-03-26 13:09:13