jquery - 更改主体的 css 背景颜色，每次单击按钮

Question

每次单击按钮时，我希望我的网页背景颜色在几种颜色之间变化(可能比我已经在此处输入的颜色多)。这是我到目前为止的代码:

var colors = ["rgba(86,175,99,0.6)", "rgba(86,175,222,0.6)", "rgba(0,0,0,0.6)"];
var randomColor = colors[Math.floor(Math.random() * colors.length)];

jQuery(".rotator").click(function () {
    jQuery('body').css("background", randomColor);
});

看来代码不会自己重复。我不知道该怎么做。

谢谢

Answer 1

您的随机颜色生成只执行一次，因为您在点击事件之外声明了变量。在点击事件中生成随机颜色。

jQuery(".rotator").click(function() {
        var randomColor = colors[Math.floor(Math.random() * colors.length)];
        jQuery('body').css("background", randomColor);
 });

Fiddle