Question

我正在尝试将背景颜色从rgb（255,255,255）切换为rgb（0,0,0），并通过每两种颜色之间的setInterval进行所有可能的操作，但是由于某种原因，在我激活时函数start（），背景颜色立即变为黑色。有谁知道如何解决这个问题？

我对解决方案一无所知，因此我愿意接受任何想法。

    function start() {

        var red = 255;
        var green = 255;
        var blue = 255;


        var id = setInterval(colorful(), 1000);

        function colorful() {

            document.body.style.backgroundColor = "rgb(" + [red,green,blue].join(",") + ")";


            if (blue == 0) {blue = 0; green--;} 

            if (green == 0) {green = 0; red--;}

            if (red == 0) {clearInterval(id);}

            blue--;

        }
    }

我希望看到背景颜色发生变化，并经历从0到255的所有rgb（）颜色，但是当我运行start（）函数时，屏幕会立即变黑。

Answer 1

您的代码中有一个问题，一旦解决，它就会按预期工作。从传递给setInterval的方法中删除方括号，并检查颜色变量的边界，以避免出现负值：

var id = setInterval(colorful, 100);

有效代码段：

 function start() {

    var red = 255;
    var green = 255;
    var blue = 255;


    var id = setInterval(colorful, 10);

    function colorful() {
        document.body.style.backgroundColor = "rgb(" + [red,green,blue].join(",") + ")";
        

        if (blue === 0 && green > 0) {green--;} 

        if (green === 0 && red > 0) {red--;}

        if (red === 0) {clearInterval(id);}

        if (blue > 0) blue--;
}}

start();

Answer 2

如果您在colorful()调用中将colorful更改为setTimeout，它将与您的代码一起使用。并且您需要将间隔持续时间从1000更改为5

但是请注意：5毫秒是很短的时间，不能保证它会这么快地工作。

function start() {

  var red = 255;
  var green = 255;
  var blue = 255;


  var id = setInterval(colorful, 5);

  function colorful() {
    document.body.style.backgroundColor = "rgb(" + [red, green, blue].join(",") + ")";


    blue--;
    if (blue <= 0) {
      blue = 0;
      green--;
    }

    if (green <= 0) {
      green = 0;
      red--;
    }

    if (red <= 0) {
      clearInterval(id);
    }

  }
}

start()

使用CSS动画会更好。

@keyframes animate-bg-fade-white-to-black {
  0% {
    background-color: #fff;
  }
  33% {
    background-color: #ff0;
  }
  67% {
    background-color: #f00;
  }
  100% {
    background-color: #000;
  }
}

body {
  animation: animate-bg-fade-white-to-black 2s linear both;
}

setInterval（）函数无法按预期工作

2 个答案: