Javascript 简单背景色

我试图在一个部分透明的.png div后面改变背景色。修改该div的类是“.alert”。我可以手动编辑.alert类的背景色，而且效果非常好。现在我试着用1秒的周期来做这个

我有这个：

var bgstate = 0;
var states = [];
states[0] = '#F00';
states[1] = '#CCC';
states[2] = '#F00';

function flash() {
bgstate++;
if( bgstate > 2 ) bgstate = 0;

$('.alert').ready(function() {
        $('.alert').css({ 'background-color' : " + states[bgstate] + " 
    });

});


$(document).ready(function() {
setTimeout(flash, 1000);
});

我似乎无法让“状态[x]”用于类警报。我在这方面很差，而且我不知道正确的语法

---

谢谢您的帮助。

setTimeout

应该是

setInterval

---

setTimeout

应为

setInterval

---

如果不测试代码的其余部分，您可能会遇到一个简单的语法错误：

$('.alert').css({ 'background-color' : " + states[bgstate] + " });

您试图在这里传递一个十六进制颜色值，它是字符串类型，但是上面插入的值是文本

试试这个（注意states[x]变量周围的附加单引号）：

---

在不测试其余代码的情况下，您可能会遇到一个简单的语法错误：

$('.alert').css({ 'background-color' : " + states[bgstate] + " });

您试图在这里传递一个十六进制颜色值，它是字符串类型，但是上面插入的值是文本

试试这个（注意states[x]变量周围的附加单引号）：

---

没有正确关闭报价。。试试这个

$('.alert').css({ 'background-color' : '"' + states[bgstate] + '"'  });

---

没有正确关闭报价。。试试这个

$('.alert').css({ 'background-color' : '"' + states[bgstate] + '"'  });

我将给您演示：

var bg = ["#000","#f00","#ff0"];
var i = 0;

setInterval(function() {
    if (i < bg.length ) {
    $("body").css({'background-color' :  bg[i] });
    i++;
    }
    else {
     $("body").css({'background-color' :  bg[0] });
    i = 1;
    }
},1000);

var bg=[“#000”，“#f00”，“#ff0”]；
var i=0；
setInterval（函数（）{
如果（i

我将给您演示：

var bg = ["#000","#f00","#ff0"];
var i = 0;

setInterval(function() {
    if (i < bg.length ) {
    $("body").css({'background-color' :  bg[i] });
    i++;
    }
    else {
     $("body").css({'background-color' :  bg[0] });
    i = 1;
    }
},1000);

var bg=[“#000”，“#f00”，“#ff0”]；
var i=0；
setInterval（函数（）{
如果（i

---

这可能是一个更易于重用的版本：

var Flasher = function ( elem, pattern ) {
  this.bg = pattern;
  this.i = 0;
  this.$el = elem;
}

Flasher.prototype.flash = function ( interval ) {
    var self = this;
    this.loop = setInterval( function() {
       if (self.i < self.bg.length) {
            self.$el.css({'background-color' :  self.bg[self.i] });
        }
        else {
         self.i = 0;
         self.$el.css({'background-color' :  self.bg[self.i] });
        }
        self.i++;
    },interval);
};

Flasher.prototype.stop = function () {
  clearInterval(this.loop);
};
var flasher = new Flasher( $('body'), ["#000","#f00","#ccc"] );
flasher.flash(1000);
flasher.stop();

var闪光器=功能（元素、模式）{
this.bg=模式；
这个。i=0；
这.$el=elem；
}
Flasher.prototype.flash=功能（间隔）{
var self=这个；
this.loop=setInterval（函数（）{
if（自i<自bg.长度）{
self.$el.css（{'background-color'：self.bg[self.i]}）；
}
否则{
自我评价i=0；
self.$el.css（{'background-color'：self.bg[self.i]}）；
}
self.i++；
}，间隔）；
};
Flasher.prototype.stop=功能（）{
clearInterval（this.loop）；
};
var闪光器=新闪光器（$（'body'），[“#000”，“#f00”，“#ccc]”）；
闪光灯。闪光灯（1000）；
闪光器停止（）；

---

​

这可能是一个更易于重用的版本：

var Flasher = function ( elem, pattern ) {
  this.bg = pattern;
  this.i = 0;
  this.$el = elem;
}

Flasher.prototype.flash = function ( interval ) {
    var self = this;
    this.loop = setInterval( function() {
       if (self.i < self.bg.length) {
            self.$el.css({'background-color' :  self.bg[self.i] });
        }
        else {
         self.i = 0;
         self.$el.css({'background-color' :  self.bg[self.i] });
        }
        self.i++;
    },interval);
};

Flasher.prototype.stop = function () {
  clearInterval(this.loop);
};
var flasher = new Flasher( $('body'), ["#000","#f00","#ccc"] );
flasher.flash(1000);
flasher.stop();

var闪光器=功能（元素、模式）{
this.bg=模式；
这个。i=0；
这.$el=elem；
}
Flasher.prototype.flash=功能（间隔）{
var self=这个；
this.loop=setInterval（函数（）{
if（自i<自bg.长度）{
self.$el.css（{'background-color'：self.bg[self.i]}）；
}
否则{
自我评价i=0；
self.$el.css（{'background-color'：self.bg[self.i]}）；
}
self.i++；
}，间隔）；
};
Flasher.prototype.stop=功能（）{
clearInterval（this.loop）；
};
var闪光器=新闪光器（$（'body'），[“#000”，“#f00”，“#ccc]”）；
闪光灯。闪光灯（1000）；
闪光器停止（）；

---

​

诚然，他的粘贴示例包含语法错误，但他的问题实际上是“如果它有效，我如何让它多次触发？”而不是“为什么这永远都不起作用？”诚然，他的粘贴示例包含语法错误，但他的问题实际上是“如果它有效，我如何让它多次触发？”不是“为什么这不管用？”这是一个非常简单的、很好的版本，我正在寻找的。谢谢。这是一个非常简单的、很好的版本，我正在寻找的。谢谢。