Setinterval 셀 색상 변경

-1

250ms마다 html 테이블의 두 셀 색상을 변경하려고합니다. 난하여 setInterval 번째 코드 블록을 주석 처리하면Setinterval 셀 색상 변경

은, 색 변화도 제 하나 멈춘다.

동시에 셀 1과 셀 2의 색상을 모두 변경하고 싶습니다. 코드에 약간의 변화에서 감사

2012-03-27 m4n07

이 ** 질문 자체 ** 코드를 넣어주세요, 단지 연결하지 않습니다 http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or- 비슷한 질문을 하시겠습니까? –

답변을 업데이트했습니다. –

-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/

, 당신은 단지 하나의 간격을 사용할 수있는 최대 정돈 코드를.

출처

2012-03-27 12:08:55 c24w

왜 downvote? – c24w

코드 **를 응답 자체에 넣으십시오. **, 단지 링크하지 마십시오 : http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting -code-in-the-question * (내 dv, btw가 아님) * –

당신은 아마 일종의 잠금 장치로 연결되는 동일한 플래그를 사용하고 있습니다. 가장 쉬운 해결책은 두 번째 버전에 다른 플래그를 추가하는 것입니다. 단 한 번의 인터벌 기능으로는 더 좋지 않습니까? 만약 내가 당신이라면 나는 각 구간을 검색하는 대신에 요소를 캐시하고 싶을 것이다.

업데이트;

(제거 된) 주석에서 요소를 동일한 간격 함수에 동적으로 추가하려고 했습니까? 나는 당신을위한 작은 플러그인 (예, 천천히 지루한 하루)을 썼습니다. 런타임에 요소를 추가하고 CSS 클래스 이름을 변경하거나 간격을 중지 할 수도 있습니다. 만하지만 파이어 폭스에서 테스트하지만,이

시험은 두 가지를 추가 사용 예제와 자바 스크립트 파일

(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 테스트 페이지

... 표준 JS 그리고 대부분의 브라우저에서 작동합니다 런타임시 추가 요소 (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가 아님) * –

Setinterval 셀 색상 변경

답변

관련 문제