javascript - 如何通过单击同一个按钮多次更改网页背景颜色？

Question

我是 JavaScript/jQuery 的绝对初学者。

我想知道是否可以通过多次单击同一个按钮来实现可以连续切换网页的多种背景颜色的效果。

这是我在网上找到的脚本：

<script>
  $("#change-colour").click(function(){ 
  $("body").css("background-color","red");
  });
</script>

但是，使用它我只能更改一次背景颜色。我希望通过单击同一个按钮多次更改背景颜色，例如：

点击>>红色>>点击>>蓝色>>点击>>绿色>>点击>>然后返回红色

任何帮助将非常感激。谢谢。

Answer 1

您需要将颜色存储在某个地方，例如数组，然后只需使用递增变量来获取下一个颜色等，如下所示：

var colors = ['red', 'blue', 'green', 'cyan'],
    i = 0;

$("#change-colour").click(function(){ 
    $("body").css("backgroundColor", colors[i++]);
    if (i >= colors.length)
        i = 0;

});​

小提琴

Answer 2

var colours = ['red', 'blue', 'green'];
var colourIndex = 0;

$('#change-colour').click(function () {
    // Get the current colour from the array
    var colour = colours[colourIndex];
    // Set the background colour
    $('body').css('background-color', colour);
    // Move the counter along to the next index
    colourIndex = colourIndex + 1;
    // If the counter is pointing past the end of
    // the array, repoint it at the beginning
    if(colourIndex >= colours.length) {
        colourIndex = 0;
    }
});