Question

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

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

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

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

然而，使用这个我只能改变背景颜色一次。我希望通过单击相同的按钮多次更改背景颜色，例如：

点击＆gt;＆gt;红色＆gt;＆gt;点击＆gt;＆gt;蓝色＆gt;＆gt;点击＆gt;＆gt;绿色＆gt;＆gt;点击＆gt;＆gt;然后回到红色

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

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

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;
    }
});

如何通过单击相同的按钮多次更改网页背景颜色？

2 个答案: