在javascript中每隔一段时间自动更改按钮的背景

changing the background of a button automatically on a regular interval in javascript

本文关键字：按钮 背景 javascript 一段时间      更新时间：2023-09-26

我想通过定期自动更改背景颜色来创建一个动画按钮。我使用了以下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标签调用了函数：

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


我还尝试了按钮点击事件。我缺少什么？

请改用

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

为什么不把整个事情简化为：

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>

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

相关文章：