javascript - シンプルな背景色

Question

部分的に透明な .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]」を機能させることができないようです。私はこれがとても苦手で、正しい構文を知りません。

助けてくれてありがとう。

score 3 · Accepted Answer

3

setTimeoutする必要がありますsetInterval

setInterval ドキュメント

于 2012-10-03T20:24:43.650 に答える

score 0 · Accepted Answer

私はあなたにデモを提供します：

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/

score 0 · Accepted Answer

残りのコードをテストしないと、単純な構文エラーが発生する可能性があります。

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

ここで文字列型の HEX カラー値を渡そうとしていますが、上に挿入された値はリテラルです。

これを試してください (states[x] 変数を囲む追加の一重引用符に注意してください):

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

score 0 · Accepted Answer

見積もりを適切に閉じていない..これを試してください

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

score 0 · Accepted Answer

これはもう少し再利用可能なバージョンかもしれません:

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

</p>

javascript - シンプルな背景色

6 に答える 6

Related

Reference