每秒钟更改红色和绿色之间的背景颜色

问题描述：

我正在尝试使网页每秒更改一次使用JavaScript的背景颜色。我正在使用setTimeout，但我无法弄清楚如何让我的变量在函数中改变。这里是我的代码：每秒钟更改红色和绿色之间的背景颜色

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript"> 
     function changecolors() { 
      x = 1; // <-- I know this is wrong, I just don't know where to place it 
      var t = setTimeout("change()", 1000); 
     } 
     function change() { 
      while(x < 3) { 
       if(x = 1) { 
        color = "red"; 
        x++; 
       } else if (x = 2) { 
        color = "green"; 
        x = 1; 
       } 
       document.body.style.background = color; 
      } 
     } 
    </head> 
    <body onload="changecolors()"> 
    </body> 
</html>

带回眨眼！：P – Russell

是change（）应该调用changecolors（）来再次设置下一个调用，还是从其他地方调用？否则它只会发生一次 –

你的代码有很多错误：（a）你的变量泄漏到全局范围中。（b）你有一个无限循环（'x'总是会变小'3'）。（c）您正在分配而不是比较。（d）你只在一秒后调用函数*一次，而不是每秒调用一次。 –

答

这里有几个问题。我刚修好你的代码：

var x; 

function changecolors() { 
    x = 1; 
    setInterval(change, 1000); 
} 

function change() { 
    if (x === 1) { 
     color = "red"; 
     x = 2; 
    } else { 
     color = "green"; 
     x = 1; 
    } 

    document.body.style.background = color; 
}

基本上...

你需要setInterval而不是setTimeout。 setTimeout只执行一次。
=分配，即使在if声明。您需要==（或更好，===）。
您不应该将字符串传递给setTimeout或setInterval。相反，传递一个函数。

另一个值得注意的一点：你不应该使用的事件侦听器的HTML元素的on*属性，尤其是不能在<body>，因为你可以做到这一点在JavaScript中，而是和不显眼：

window.onload = changecolors;

当然，you could do it with fewer functions and no pollution of the global namespace。

这是最好的答案（我提高了它），但我很好奇，你为什么说不要在html中使用on ****属性。我通常使用jQuery来绑定事件，但有时我使用onclick或onmouseover。这些问题有什么问题？ – Landon

@Landon：这并不是说他们错了，但是在大型项目中，当所有的JavaScript，CSS和HTML都是分开的时候，通常会更容易理解。当你像这样混合JavaScript和HTML时，它会变得混乱。当然，如果你正在测试，只能访问一个文件，或者正在做一个小型的个人项目，这不是太糟糕。 – Ryan

非常感谢。你非常直率地解释了你为什么改变了你所做的事情。非常丰富。 –

答

x = 1;分配x的值为1，即使在if声明。在if语句中使用x == 1可以保持变量的值不变。

即使使用此修复程序，它也不会按预期工作。 –

答

一方面，这样的：

if (x = 1){

应该是这样的：

if(x == 1) {

您的发言设置x 1，而不是测试它，看它是否是1

答

我会建议不要这样做，因为它可能很烦人，但这应该工作：

var x = false; 
function changecolors(){ 
    var color=(x)?"green":"red"; // If X == true, then set to green, if false then blue 
    document.body.style.background = color; // Set color 
    x=!x; // Invert X 
}

然后在身体：

<body onload="setInterval(changecolors,1000)">

PS：很抱歉，如果我不回答这个问题吧...此代码将背景从蓝色反复变为绿色每一秒的时间无限量。（我的意思是，我还挺重做你的代码，而不是解释什么是错的与你的...）

答

闪烁小提琴：

http://jsfiddle.net/GolezTrol/R4c5P/1/

使用此功能：

function initBlink() 
{ 
    var state = false; 
    setInterval(function() 
     { 
      state = !state; 
      var color = (state?'red':'green'); 
      document.getElementById('test').style.color = color; 
     }, 1000); 
}

使用闭包来使国家脱离全球范围。重复调用使用setInterval而不是setTimeout，尽管这可能不方便。如果需要，setInterval和setTimeout都会返回一个可以保存并用于停止计时器的句柄，但由于您没有问过这个问题，所以为了简单起见，我将其忽略了。

函数只是定义了一个匿名回调，该回调切换布尔值并设置测试div的颜色。

答

您的代码缺少关闭</script>标记和上述其他问题。

从下面的代码中找到一个删除全局变量的代码。

<html> 
    <head> 
     <script type="text/javascript"> 
     function changecolors() {  
      var t = setInterval('change()',1000); 
     } 

     function change() { 
      var color = document.body.style.background; 

      if(color == "red") { 
       document.body.style.background = "green"; 
      } else { 
       document.body.style.background = "red"; 
      } 
     } 
     </script> 
    </head> 
    <body onload="javascript:changecolors()"> 
    </body> 
</html>

答

此外，请考虑用CSS做。 Demo。

@-webkit-keyframes blink { 
     0% { background:red; } 
     50% { background:green;} 
     100% { background:red; } 
} 
@-moz-keyframes blink { 
     0% { background:red; } 
     50% { background:green;} 
     100% { background:red; } 
} 
@-ms-keyframes blink { 
     0% { background:red; } 
     50% { background:green;} 
     100% { background:red; } 
} 
body{ 
    -webkit-animation: blink 1s infinite; 
    -moz-animation: blink 1s infinite; 
    -ms-animation:  blink 1s infinite; 
}

现在这是一个创造性的方法，很遗憾它只能在最新的浏览器上工作。 – mx0

答

如果你期望浏览器支持CSS动画，你可以做些更有趣的事情，也许不那么讨厌。定义在样式表：

body { 
    -webkit-animation: changebg 1s infinite cubic-bezier(1,0,0,1); 
     -moz-animation: changebg 1s infinite cubic-bezier(1,0,0,1); 
      animation: changebg 1s infinite cubic-bezier(1,0,0,1); 
} 

@-moz-keyframes changebg { 
     0% {background-color: #f00;} 
    50% {background-color: #fff;} 
    100% {background-color: #f00;} 
} 

@-webkit-keyframes changebg { 
     0% {background-color: #f00;} 
    50% {background-color: #fff;} 
    100% {background-color: #f00;} 
} 

@keyframes changebg { 
     0% {background-color: #f00;} 
    50% {background-color: #fff;} 
    100% {background-color: #f00;} 
}

大功告成，没有JavaScript的。不幸的是，CSS动画还不是标准的，所以那些取决于前缀，因此我不得不重复-moz-和-webkit-。目前，它不适用于Opera和IE。

2012注：（未测试）Opera现在支持CSS3动画。它简短地需要在Op 12.0中作前缀，现在它在Op 12.5中前缀前缀，根据caniuse.com – FelipeAls

@FelipeAlsacreations谢谢你，必须注意。 – MaxArt

答

您应该定义阅读一些基本的JavaScript教程或书籍。我也是JavaScript新手，但一些阅读已经有所帮助。这里http://www.w3schools.com/js/你可以找到一些好东西作为参考。

这应该做的伎俩

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript"> 

      function change_color(flag){ 
       var color = null; 
       if (flag === true){ 
        var color = "red"; 
       }else{ 
        var color = "green"; 
       } 
       document.body.style.background = color; 
       flag = !flag 
       var t=setTimeout(function(){change_color(flag)},1000); 
      } 
     </script> 
    </head> 

    <body onload="change_color(true)"> 
</body>

如果你要操作DOM很多我建议JQuery的

答

我创造了这个功能称为toggle_colour的非常相同目的。

function toggle_color(color1, color2, cycle_time, wait_time) { 
    setInterval(function first_color() { 
     document.body.style.backgroundColor = color1; 
     setTimeout(change_color, wait_time); 
    }, cycle_time); 

    function change_color() { 
    document.body.style.backgroundColor = color2; 
    } 
}

现在，你可以简单地复制上面的代码，并呼吁有两个颜色代码的功能。像，

toggle_color("#61beb3", "#90a2c6", 4000, 2000);

您可以查看完整的演示和更先进的切换功能，色彩的文章中，Changing background color every X seconds in Javascript

免责声明：我这个教程文章的作者。

每秒钟更改红色和绿色之间的背景颜色

相关推荐