2015-02-06 85 views
0

我想通過自動定期更改其背景色來創建動畫按鈕。我使用了以下Javascript:在javascript中定期自動更改按鈕的背景

var colors = new Array("Red", "GreenYellow", "Fuchsia", "OrangeRed", "Yellow", "Blue", "Navy", "MediumSpringGreen", "Lime", "SteelBlue"); 
function bcAnimation(y){ 
    var x; 
    x=y; 
    x.style.backgroundColor = colors[Math.floor(Math.random()*10)]; 
    setTimeout(bcAnimation(x), 2000); 
} 


嵌套調用不起作用。該按鈕被更改一次。我打電話從身體標記功能:

<body onload='bcAnimation(document.getElementById("x"));'> 


我也與按鈕onclick事件試過。我錯過了什麼?

+0

有沒有任何答案可以幫助你並回答你的問題?如果不是,請告訴我們,以便我們可以提供更多幫助。如果是這樣,請將最有幫助的答案標記爲「已接受」。謝謝! – 2015-02-16 20:36:48

+0

非常感謝。問題已經解決了。 – Asif 2015-02-18 02:29:23

+0

謝謝!您可以通過點擊投票計數下的複選標記來接受答案。 – 2015-02-18 02:41:40

回答

0

試試這個

setTimeout(function(){ bcAnimation(x); }, 2000); 
+0

感謝您的寶貴解決方案.. – Asif 2015-02-07 05:13:13

0

爲什麼不只是簡化了整個事情:

var colors = new Array("Red", "GreenYellow", "Fuchsia", "OrangeRed", "Yellow", "Blue", "Navy", "MediumSpringGreen", "Lime", "SteelBlue"); 
 
setInterval(function() { 
 
    x.style.backgroundColor = colors[Math.floor(Math.random() * 10)]; 
 
}, 2000)
<button id="x">button</button>

0

$(function() { 
 
    var curColor = 0; 
 
    var colors = new Array("Red", "GreenYellow", "Fuchsia", "OrangeRed", "Yellow", "Blue", "Navy", "MediumSpringGreen", "Lime", "SteelBlue"); 
 
    setInterval(function() { 
 
     $('button.colors').css('background-color', colors[curColor]); 
 
     curColor += 1; 
 
     if (curColor >= colors.length) { 
 
      curColor = 0; 
 
     } 
 
    }, 500); 
 
});
button.colors { 
 
    background-color: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class="colors"> :D </button>