简单的背景颜色答案

【问题标题】：Simple background color简单的背景颜色
【发布时间】：2012-10-03 20:22:29
【问题描述】：

我试图让背景颜色在部分透明的 .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);
});

我似乎无法让“states[x]”为班级警报工作。我很不擅长这个，而且我不知道正确的语法。

感谢您的帮助。

【问题讨论】：

标签： javascript jquery html css loops

【解决方案1】：

setTimeout 应该是setInterval

setInterval doc

【讨论】：

【解决方案2】：

我会给你演示：

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

http://jsfiddle.net/Q9jhX/

【讨论】：

这是我正在寻找的一个非常简单的好版本。谢谢。

【解决方案3】：

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

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

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

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

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

【讨论】：

诚然，他粘贴的示例包含语法错误，但他的问题实际上是“鉴于它有效，我如何让它多次触发？”不是“为什么这不起作用？”

【解决方案4】：

没有正确关闭您的报价.. 试试这个

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

function flash() {
 $('.alert').css('background-color', states[bgstate] );
 bgstate = (bgstate+1) % states.length;
});


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

【讨论】：