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

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

javascript css arrays

Javascript 使用单个按钮，如何按列出的顺序更改div背景颜色，而不是随机更改,javascript,css,arrays,onclick,background-color,Javascript,Css,Arrays,Onclick,Background Color,我正在使用下面的代码在单击按钮时更改div的背景色。它随机选择颜色（math.random），但我希望它按列出的顺序选择颜色（红色>蓝色>黄色>等等）。有人能帮我吗？提前谢谢 <style> #changecolor2 { height: 100px; width: 100px; } </style> <script> var colors = ["red", "blue", "yellow", "green", "orange", "bla

我正在使用下面的代码在单击按钮时更改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>


#变色2{
高度：100px；
宽度：100px；
}
变量颜色=[“红色”、“蓝色”、“黄色”、“绿色”、“橙色”、“黑色”、“青色”、“洋红”]
函数changeColor（）{
var col=document.getElementById（“changecolor”）；
col.style.backgroundColor=颜色[Math.floor（（Math.random（）*8）+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];
}

小提琴：


var计数=0；
变量颜色=[“红色”、“蓝色”、“黄色”、“绿色”、“橙色”、“黑色”、“青色”、“洋红”]
函数changeColor（）{
如果（计数>=颜色。长度-1）{
计数=0；
}否则{
计数++；
}
document.getElementById（“changecolor2”）.style.backgroundColor=colors[count]；
}

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

您始终可以通过简单的搜索循环找到当前背景颜色，然后将其添加到结果索引中，如果最终结果高于颜色数，只需减去元素数，或使用模数运算符即可。这对你有帮助吗？

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

<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>

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