每秒更改背景颜色在红色和绿色之间。

Question

每秒更改背景颜色在红色和绿色之间。

4

我想使用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>

- Justin Yoder

change() 是否应该调用 changecolors() 来设置下一次调用，还是它被从其他地方调用？否则它只会发生一次。 - Nadir Muzaffar

2

你的代码有很多问题：(a) 你的变量泄漏到全局作用域。(b) 你有一个无限循环(x将永远小于3)。(c) 你正在赋值而不是比较。(d) 你只在一秒后调用函数一次，而不是每秒调用。 - Felix Kling

这不是实际的代码，只是我制作的一个模型，用来展示我想要做的事情。 - Justin Yoder

@Russel，非常感谢您的回答！点赞！ - obzenner

10个回答

6

Blink fiddle:

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 的颜色。

- GolezTrol

5

另外，考虑使用CSS实现。演示。

@-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;
}

- bookcasey

现在这是一种有创意的方法，可悲的是它只能在最新的浏览器上运行。 - mx0

2

如果您希望浏览器支持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上工作。

- MaxArt

1

2012年注：（未经测试）Opera现在支持CSS3动画。在Op 12.0中，它需要加前缀，但根据caniuse.com，在Op 12.5中已经取消了前缀。 - FelipeAls

1

x = 1; 将 x 赋值为 1，即使在 if 语句中也是如此。在 if 语句中使用 x == 1 来保持变量的值不变。

- Matt

1

首先，这个：

if (x = 1){

应该是这样的：

if(x == 1) {

你的语句将 x 设置为 1，而不是测试它是否为 1。

- dnuttle

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：如果我没有正确回答问题，对不起...这段代码会每秒钟重复地将背景从蓝色变为绿色，无限次地进行下去。（我的意思是，我重新编写了你的代码，而不是解释你的代码有什么问题...）

- JCOC611

1

你应该阅读一些基础的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。

- Esteban Angee

0

你的代码缺少闭合的</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>

- scartag

0

我创建了一个名为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);

您可以在文章中查看完整的演示和更高级的切换颜色功能，使用Javascript每X秒更改背景颜色。

免责声明：本教程文章的作者为我。

- Narendran Parivallal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ry- · Accepted Answer

这里存在几个问题。我将修复你的代码：

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;

当然，你可以使用更少的函数而且不会污染全局命名空间。