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更改單元格的顏色

回答

相關問題