0

这段代码的目的是在一个循环中多次改变网页的背景。

以下实现不使用 .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);
}

但是，背景颜色仅使用此代码更改一次。

4

3 回答 3

1

正如“我不是”所提到的，您在完成所有循环后设置背景。以下是我喜欢将参数传递给 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 
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);
}

感谢您的帮助，特别是 Rob W 的优化，以及对问题的“我不是”的解释。

于 2012-07-19T21:16:17.470 回答
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 回答