2012-03-27 21 views
-1

250ミリ秒ごとにhtmlテーブルの2つのセルの色を変更しようとしています。Setintervalセルの色を変更する

http://jsfiddle.net/m4n07/DYP69/

iは、のsetIntervalコードの第2のブロックのコメントを解除した場合、変色があっても最初のもののために停止します。

セル1とセル2の両方の色を同時に変更したいと思います。あなたのコードにわずかな変更から感謝

+2

**は質問自体に**コードを入れてください、単にリンクしません。http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-似たような質問のためのコード –

+0

私は自分の答えを更新しました。 –

答えて

-1

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);​ 

編集:片付けコードhttp://jsfiddle.net/DYP69/6/

あなたは彼らが同時に色を変更したい、あなただけの1区間を使用することができたので。

+0

なぜdownvote? – c24w

+1

コード**を回答自体に入れてください**、リンクしないでください:http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting -code-in-the-question *(私のdv、btwではない)* –

0

あなたはおそらく何らかのロックを引き起こす同じフラグを使用しています。あなたのための最も簡単な解決策は、2つ目のバージョンのために別のフラグを追加することですが、1つのインターバル機能だけではそれほど良い方法ではないでしょうか?もし私があなただったら、各インターバルで検索するのではなく、要素をキャッシュしたいと思うでしょう。

更新;

コメントは(削除された)コメントから、同じ間隔関数に要素を動的に追加したかったのですか?私はあなたのための小さなプラグインを書いた(ええと、遅く退屈な仕事の日)。実行時に要素を追加して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テストページ

テストは2を追加のみ実行時に追加要素(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> 
-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); 
+0

コード**を回答自体に入れてください**、リンクしないでください:http://meta.stackexchange.com/questions/118392/ add-stack-overfow-faq-entry-or-similar-for-put-code-in-the-question *(not my dv、btw)* –

関連する問題