0

このコードの目的は、ループ内でWebページの背景を数回変更することです。

次の実装では、.toString（）を使用して背景の色を設定しません。代わりに、背景を変更する色を明示的かつ静的に指定します。

var i=1;
function changeColor() {
    var 
        interval=100, //16.66666666, //60 hertz refresh rate
        loops=10
    ;

    setTimeout(function() {$("#page").css({"background":"#000"})}, interval*0);
    setTimeout(function() {$("#page").css({"background":"#111"})}, interval*1);
    setTimeout(function() {$("#page").css({"background":"#222"})}, interval*2);
    setTimeout(function() {$("#page").css({"background":"#333"})}, interval*3);
    setTimeout(function() {$("#page").css({"background":"#444"})}, interval*4);
    setTimeout(function() {$("#page").css({"background":"#555"})}, interval*5);
    setTimeout(function() {$("#page").css({"background":"#666"})}, interval*6);
    setTimeout(function() {$("#page").css({"background":"#777"})}, interval*7);
    setTimeout(function() {$("#page").css({"background":"#888"})}, interval*8);
    setTimeout(function() {$("#page").css({"background":"#999"})}, interval*9);
    setTimeout(function() {$("#page").css({"background":"#AAA"})}, interval*10);
    setTimeout(function() {$("#page").css({"background":"#BBB"})}, interval*11);
    setTimeout(function() {$("#page").css({"background":"#CCC"})}, interval*12);
    setTimeout(function() {$("#page").css({"background":"#DDD"})}, interval*13);
    setTimeout(function() {$("#page").css({"background":"#EEE"})}, interval*14);
    setTimeout(function() {$("#page").css({"background":"#FFF"})}, interval*15);

    setTimeout(function() {
        if (i<loops) {
            i++;
            changeColor();
        } else {
            $("#page").css({"background":"#FFF"});
            i=1;
        }
    },interval*16);
}

forループを使用する必要があることは非常に明白であるように思われたので、次のように書き直しました。

var i=1;
var color=0x111111;
function changeColor() {
    var 
        interval=100, //16.66666666, //60 hertz refresh rate
        loops=3
    ;
    for (j=0;j<15;j++) {
        setTimeout(function() {$("#page").css({"background":"#"+color.toString(16)})}, interval*j);
        color+=0x111111;
    }
    color=0x111111;
    setTimeout(function() {
        if (i<loops) {
            i++;
            changeColor();
        } else {
            $("#page").css({"background":"#FFF"});
            i=1;
        }
    },interval*j);
}

ただし、このコードを使用すると、背景色は1回だけ変更されます。

4

3 に答える 3

1

「amnotiam」で述べたように、すべてのループが完了した後に背景を設定します。以下は、setTimeoutまたはsetIntervalにパラメーターを渡すために私が好きな方法です。

new (function (color) {
    setTimeout(function(){
        document.body.style.background = newcolor;
    }, 50);
})(color);

基本的には、setTimeoutが実行されるまで破棄されないローカルスコープを作成します。

より一般的には、コードは次のように簡略化できます。

var i = 0;
var color = 0x000000;
function changeColor() {
    color += 0x111111;
    if (color > 0xffffff) {
        if (i >= 3) {
            return;
        }
        color = 0x000000;
        i++;
    }
    document.body.style.background = "#" + color.toString(16);
    setTimeout(changeColor, 100);
}

それがあなたが望むことを正確に行うかどうかはわかりませんが、必要に応じて微調整できるはずです。

于 2012-07-19T21:16:18.050 に答える
0

このコードで問題が解決すると思います。

色をパラメーターとして受け取るforループに関数呼び出しを追加しました。このように、その関数のすべての呼び出しには、時間の経過とともに変化しない独自の色の値があります。

var i=1;
var color=0x111111;
var page=$("#page");
function changeColor() {
    var
        interval=100, //16.66666666, //60 hertz refresh rate
        loops=3
    ;
    for (j=0;j<15;j++) {
      // I added an inner function in the for loop that holds the value of var color
      (function (color) {
        setTimeout(function() {page.css({"background":"#"+color.toString(16)})}, interval*j);
      })(color);
      color += 0x111111;
    }
    setTimeout(function() {
        if (i<loops) {
            i++;
            changeColor();
        } else {
            page.css({"background":"#FFF"});
            i=1;
        }
    },interval*j);
}
于 2012-07-19T21:00:34.677 に答える
0 
var i=1;
var color=0;
function changeColor() {
    var 
        interval = 16.66666, //60 hertz refresh rate
        loops = 40,
        $page = $("#page")
    ;

    for (j=0;j<16;j++) {
        setTimeout(function() {
            $page.css({"background":"#"+color.toString(16)});
            color+=0x111111 //color increment <i>inside</i> the Timeout (d'oh)
        }, interval*j);
    }

    // Pretty wind-down :3
    for (;j<31;j++) {
        setTimeout(function() {
            $page.css({"background":"#"+color.toString(16)});
            color-=0x111111
        }, interval*j);
    }

    setTimeout(function() {
        color=0x111111;
        if (i<loops) {
            i++;
            changeColor();
        } else {
            $page.css({"background":"#FFF"});
            i=1;
        }
    },interval*j);
}

あなたの助け、特に最適化のためのロブWと問題の「私ではない」説明に感謝します。

于 2012-07-19T21:16:17.470 に答える