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

在函数内添加代码。更改颜色仅执行一次！

colors = ["rgba(86,175,99,0.6)", "rgba(86,175,222,0.6)",     jQuery(".rotator").click(function() {
"rgba(0,0,0,0.6)"];
  randomColor = colors[Math.floor(Math.random() * colors.length)];
  jQuery('body').css("background", randomColor);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a class="rotator" href="#">Change</a>

Answer 2

您的随机颜色生成仅执行一次，因为您声明了click事件的外部变量。在click事件中生成随机颜色。

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

Fiddle

Answer 3

将随机颜色放在点击功能中，这样每次都会创建一个随机颜色

var colors = ["rgba(86,175,99,0.6)", "rgba(86,175,222,0.6)", "rgba(0,0,0,0.6)"];


    jQuery(".rotator").click(function() {

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

你的第一个代码只创建了一次随机颜色，如果你把它放在click函数中，它每次都会创建一个随机颜色：）

Answer 4

你可以将randomColor函数移动到点击功能

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

改变身体的css背景颜色，每次点击按钮

4 个答案: