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;

});​

FIDDLE