更改背景顏色範圍

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

，您應該使用setTimeout的animate完整的回調中。使用setInterval不會等待最後一個動畫完成。

另外，還要確保你已經添加JQuery的和jQueryUI的庫

代碼片段

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

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

<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>

Answer 2

這不是一個範圍問題。問題是因爲當您將bgColor定義放在函數之外時，它僅在加載時生成，而不是每次間隔調用changeBackground()時生成。這意味着該函數在每次調用時都會設置相同的顏色，並且看起來什麼也不做。

另請注意，除非您在頁面中包含jQueryUI，否則您不能在backgroundColor上調用animate()。試試這個：

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

<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>

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>