Question

我正在尝试使用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>

Answer 1

这里有几个问题。我只修复你的代码：

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。

Answer 2

眨眼小提琴：

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

Answer 3

另外，请考虑使用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;
}

Answer 4

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

Answer 5

x = 1;即使在x语句中，也会为if赋值1。在x == 1语句中使用if可以保持变量的值不变。

Answer 6

首先，这个：

if (x = 1){

应该是这样的：

if(x == 1) {

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

Answer 7

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

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：对不起，如果我没有正确回答这个问题......这段代码会在无限长的时间内反复将背景从蓝色变为绿色。（我的意思是，我有点重新编写代码，而不是解释你的代码有什么问题......）

Answer 8

你应该明确地阅读一些基本的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

Answer 9

您的代码缺少结束</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>

Answer 10

为了同样的目的，我创建了一个名为 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

中查看完整的演示和更高级的切换颜色功能

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

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

10 个答案: