Setinterval更改单元格的颜色

-1

我试图在每250ms后更改html表格中两个单元格的颜色。Setinterval更改单元格的颜色

如果我取消的代码的setInterval第二块，颜色改变，即使是第一个停止。

我想同时更改单元格1和2的颜色。由于

2012-03-27 m4n07

请把码**在问题本身**，不只是链接：http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-类似的代码在这个问题 – 2012-03-27 12:08:14

我已经更新了我的答案。 – 2012-03-27 13:32:46

-1

从轻微改变了代码：http://jsfiddle.net/DYP69/6/

既然你说你希望他们同时改变颜色，你可以只使用一个间隔：

var flag = true; 

setInterval(
    function(){ 
     if (flag) { 
      document.getElementById("Id1").style.background = "red"; 
      document.getElementById("Id2").style.background = "blue"; 
     } 
     else{ 
      document.getElementById("Id1").style.background = "blue"; 
      document.getElementById("Id2").style.background = "red"; 
     } 
    flag = !flag; 
    }, 250);

编辑：收拾代码。

来源

2012-03-27 12:08:55 c24w

为什么downvote？ – c24w 2012-03-27 12:15:00

请将代码**放入答案本身**，请不要链接：http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-forputing - 代码中的问题*（不是我的dv，btw）* – 2012-03-27 12:22:25

您正在使用相同的标志，可能会导致某种锁定。最简单的解决方案就是为第二个版本添加另一个标志 - 但仅仅使用一个间隔函数会不会更好？如果我是你，我可能也想缓存元素，而不是在每个时间间隔进行查找。

更新;

从（删除）评论，你想要动态地添加元素到相同的区间函数？我为你写了一个小插件（是的，工作中慢而无聊的一天）。您可以在运行时添加元素并更改CSS类名称，甚至可以停止时间间隔。只是Firefox测试，虽然，但它是标准的JS，应在大多数浏览器工作...

JavaScript文件

(function (window, document, undef) { 

    var CB = {}; 

    if (typeof window.CB !== typeof undef) { 
     return; 
    } 

    CB = function() { 

     var elements = [], 
      classes = ['first-round', 'second-round'], 
      intervalId = 0; 


     var flag  = 0; 
     var switcher = function() { 

      for (var i = 0; i < elements.length; i++) { 
       elements[i].className = classes[flag]; 
      } 

      flag = 1 - flag; 

     }; 


     return { 

      setClasses: function (first, second) { 

       classes = [first, second]; 

      }, 

      addElement: function (element) { 

       elements.push(element); 

      }, 

      init: function (element, firstClass, secondClass) { 

       this.addElement(element); 
       this.setClasses(firstClass, secondClass); 

       return this; 

      }, 

      start: function (interval) { 

       intervalId = setInterval(switcher, interval); 

      }, 

      stop: function() { 

       clearInterval(intervalId); 

      } 

     } 

    }(); 

    window.CB = CB; 

})(window, document);

HTML测试页面与用法示例

测试增加了两个运行时附加元素（5秒超时）以及更改类别

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8" /> 

     <style> 

      .container { 
       width: 600px; 
       margin: 50px auto; 
      } 
       .container > div { 
        width: 300px; 
        height: 50px; 
        float: left; 
       } 
       .container .clear { 
        clear: both; 
        float: none; 
        width: 0; 
        height: 0; 
       } 

      .first-class { 
       background-color: red; 
      } 
      .second-class { 
       background-color: blue; 
      } 

      .new-first-class { 
       background-color: black; 
      } 
      .new-second-class { 
       background-color: grey; 
      } 

     </style> 

    </head> 
    <body> 

     <div class="container"> 
      <div id="Id1"> 

      </div> 

      <div id="Id2"> 

      </div> 
      <div class="clear"></div> 
     </div> 

     <div class="container"> 
      <div id="Id3"> 

      </div> 
      <div id="Id4"> 

      </div> 
      <div class="clear"></div> 
     </div> 

     <script src="CB.js"></script> 
     <script> 

      window.onload = function() { 

       CB.init(document.getElementById('Id1'), 'first-class', 'second-class'); 
       CB.addElement(document.getElementById('Id2')); 

       CB.start(120); 

       setTimeout(function() { 

        CB.addElement(document.getElementById('Id3')); 
        CB.addElement(document.getElementById('Id4')); 
        CB.setClasses('new-first-class', 'new-second-class'); 

       }, 5000); 

      }; 

     </script> 

    </body> 
</html>

来源

2012-03-27 12:09:39

-1

试试这个。

var flag = true; 

setInterval(
function changeColor() { 
    if(flag==true){ 
     document.getElementById("Id1").style.background="red"; 
     document.getElementById("Id2").style.background="red"; 
     flag=false; 
    } 
    else if (flag==false){ 
    document.getElementById("Id1").style.background="blue"; 
    document.getElementById("Id2").style.background="blue"; 
    flag = true; 
    } 
}, 110);

来源

2012-03-27 12:10:49

请把代码**放在答案本身**，不要只是链接：http://meta.stackexchange.com/questions/118392/ add-stack-overfow-faq-entry-or-similar-for-put-code-in-the-question *（不是我的dv，btw）* – 2012-03-27 12:23:04

Setinterval更改单元格的颜色

回答

相关问题