Question

Var bgcolor，当函数changeBackground（）外部不能正常工作时。我试图了解js中的范围。如果var在函数之外，则它应该是全局的并且对于其余代码是可变的。当我在函数内部使用var bgcolor时程序可以工作。为什么？

var colors = ['#6aa085', '#a73e60', '#90fe50', '#231c12', '#e7043c', '#0b59b6', '#F66964', '#0f2224', "#4c0E32", "#B3BB99", "#a7a1A9", "#132857"]; // do not have to be inside the changeBackground function 
var bgcolor = Math.floor(Math.random() * colors.length); // must be inside the function 

function changeBackground() {
  $('#clock').animate({
    backgroundColor: colors[bgcolor],
  }, 2000);
}

window.setInterval(changeBackground, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

谢谢你的帮助。

Answer 1

这不是一个范围问题。问题是因为当您将bgColor定义放在函数之外时，它只在加载时生成，而不是每次间隔调用changeBackground()时生成。这意味着该函数在每次调用时设置相同的颜色，并且似乎什么都不做。

另请注意，除非您在页面中包含jQueryUI，否则无法在animate()上致电backgroundColor。试试这个：

＆＃13;

var colors = ['#6aa085', '#a73e60', '#90fe50', '#231c12', '#e7043c', '#0b59b6', '#F66964', '#0f2224', "#4c0E32", "#B3BB99", "#a7a1A9", "#132857"];

function changeBackground() {
  var bgcolor = Math.floor(Math.random() * colors.length);
  $('#clock').animate({
    backgroundColor: colors[bgcolor],
  }, 2000);
}

setInterval(changeBackground, 2000);

＆＃13;

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="clock">Clock</div>

＆＃13;

Answer 2

您应该在animate的完整回调中使用setTimeout。

使用setInterval将不会等待最后一个动画完成。

还要确保添加了 JQuery 和 JQueryUI 库

<强>段

＆＃13;

var colors = ['#6aa085', '#a73e60', '#90fe50', '#231c12', '#e7043c', '#0b59b6', '#F66964', '#0f2224', "#4c0E32", "#B3BB99", "#a7a1A9", "#132857"]; // do not have to be inside the changeBackground function 



function changeBackground() {
  var bgcolor = Math.floor(Math.random() * colors.length); // must be inside the function 
  $('#clock').animate({
    backgroundColor: colors[bgcolor]
  }, 2000, function() {
    window.setTimeout(changeBackground, 2000); //Second animate after first completes
  });
}

window.setTimeout(changeBackground, 2000); //For first time

＆＃13;

#clock {
  width: 100px;
  height: 100px;
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="clock"></div>

＆＃13;

Answer 3

var colors = ['#6aa085', '#a73e60', '#90fe50', '#231c12', '#e7043c', '#0b59b6', '#F66964', '#0f2224', "#4c0E32", "#B3BB99", "#a7a1A9", "#132857"]; // do not have to be inside the changeBackground function 


function changeBackground() {
  var bgcolor = Math.floor(Math.random() * colors.length); // must be inside the function 
  $('#clock').animate({
    backgroundColor: colors[bgcolor],
  }, 2000);
}

window.setInterval(changeBackground, 2000);

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<div id="clock">Clock Area</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

更改背景颜色范围

3 个答案: