Question

当我按下某个按钮时，我试图让背景颜色发生变化，但它似乎无法正常工作。

我在数组中存储十六进制颜色，然后使用math.random来生成随机颜色。我一直在使用chrome进行调试，无法解决问题。

$(document).ready(function() {
var colors = ['#E9967A', '#FF8C00', '#4682B4', '#CD853F', '#008080', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#fb9664', '#bdbb99', '#77b1a9', '#73a857'];


    $("#getQuote").on("click", function(){
      $.getJSON("http://api.forismatic.com/api/1.0/method=getQuote&format=json&lang=en", function(json) {
        $(".id").html(JSON.stringify(json));
      });
    });

    $("getQuote").click(function(){
      var color = Math.floor(Math.random() * colors.length);
      $("html body").animate({
        backgroundColor: colors[color]
      }, 1000);
    });
  });

编辑我发布了所有代码，以便更好地了解正在发生的事情

感谢您的帮助！

Answer 1

第一件事就是放置这个字符串： var color = Math.floor(Math.random() * colors.length); 在事件中，所以当点击发生时会产生颜色，否则它将始终是相同的颜色（我没试过，所以也许我错了）

Answer 2

您可以将颜色变量变为每次都返回计算值的函数

var color = fn => Math.floor(Math.random() * colors.length);

然后在引用颜色索引时将其作为函数调用

backgroundColor: colors[color()]

Answer 3

问题javascript有四个问题。

选择器"getQuote"不是html元素;在选择器字符串的开头缺少"#"。
jQuery .animate()默认情况下不会为颜色设置动画


动画属性和值

所有动画属性都应设置为单个数值，   除非如下所述;大多数非数字属性不能   使用基本jQuery功能进行动画处理（例如，宽度，高度，   或左边可以动画，但背景颜色不能，除非   使用jQuery.Color插件。）
传递给{的第一个参数缺少开放.animate();例如，.animate({property:value})
color变量在click元素的每个#getQuote事件中都不会更改，因为color在.click()处理程序

您可以使用jQuery UI为颜色设置动画

$(function() {

var colors = ['#E9967A', '#FF8C00', '#4682B4', '#CD853F'
              , '#008080', '#27ae60', '#2c3e50', '#f39c12'
              , '#e74c3c', '#9b59b6', '#fb9664', '#bdbb99'
              , '#77b1a9', '#73a857'];

  $("#getQuote").click(function() {
    var color = Math.floor(Math.random() * colors.length);
    $("html body").animate({
      backgroundColor: colors[color]
    }, 1000);
  });

})

body {
  width: 100vw;
  height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>

<body>
  <button id="getQuote">click</button>
</body>

您也可以使用css选择器上的transition body .css()

$(function() {

var colors = ['#E9967A', '#FF8C00', '#4682B4', '#CD853F'
              , '#008080', '#27ae60', '#2c3e50', '#f39c12'
              , '#e74c3c', '#9b59b6', '#fb9664', '#bdbb99'
              , '#77b1a9', '#73a857'];


  $("#getQuote").click(function() {
    var color = Math.floor(Math.random() * colors.length);
    $("html body").css("backgroundColor", colors[color]);
  });

})

body {
  width: 100vw;
  height: 100vh;
  transition: background-color 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js">
</script>

<body>
  <button id="getQuote">click</button>
</body>

.animate中的属性？

3 个答案: