간단한 자바 스크립트 버튼이 1

Question

안녕 메신저 좀 문제가, 하나의 버튼이 텍스트 깜박임을 만들려고 노력 임

그래서 OFF로 사도 행전을 ( 을 클릭하고 또한 클릭 클릭 있는 1)

임 꽤 도움이 JS를 처음 주시면 감사하겠습니다

var Blinker = { 
 
    interval: null, 
 
    start: function() { 
 
     if (this.interval) return; 
 
     this.interval = setInterval(function() {  
 
      $('#demo').toggle(); 
 
     }, 250); 
 
    }, 
 
    stop: function() { 
 
     clearInterval(this.interval); 
 
     $('#demo').show(); 
 
     this.interval = null; 
 
    } 
 
} 
 

 
//Initialize blink status. 
 
var blinkStatus = 1; 
 

 
//Check if status is changed, and run/stop blinking. 
 
setInterval(function() { 
 
    if (blinkStatus == 1) { 
 
     Blinker.start(); 
 
    } 
 
    else { 
 
     Blinker.stop(); 
 
    } 
 
}, 250); 
 

 

 
$('#start').on('click', function() { 
 
    blinkStatus = 1; 
 
}); 
 
$('#stop').on('click', function() { 
 
    blinkStatus = 0; 
 
});

<h1 id="demo">PAUSE</h1> 
 
<button id="start">Start</button> 
 
<button id="stop">Stop</button>

Answer 1

하면이 코드를 사용해보십시오. 이것은 단일 버튼으로 깜박임을 토글합니다.

HTML :

<div class="text-container"> 
    <h1 id="demo">PAUSE</h1> 
</div> 
<button id="toggle-button">Start</button> 

CSS :

.hide { 
    display: none; 
} 

.text-container { 
    height: 17px; 
} 

JS :

var Blinker = { 
    interval: null, 
    start: function() { 
     if (this.interval) return; 
     this.interval = setInterval(function() { 
      $('#demo').toggleClass('hide'); 
     }, 250); 
    }, 
    stop: function() { 
     clearInterval(this.interval); 
     $('#demo').removeClass('hide'); 
     this.interval = null; 
    } 
} 

//Initialize blink status. 
var blinkStatus = 0; 

//Check if status is changed, and run/stop blinking. 
setInterval(function() { 
    if (blinkStatus == 1) { 
     $('#toggle-button').text('Stop'); 
     Blinker.start(); 
    } 
    else { 
     $('#toggle-button').text('Start'); 
     Blinker.stop(); 
    } 
}, 250); 


$('#toggle-button').on('click', function() { 
    if (blinkStatus) { 
     blinkStatus = 0; 
    } else { 
     blinkStatus = 1; 
    } 
}); 

Answer 2

의견에 대한 귀하의 요청에 따라 귀하의 코드를 약간 수정했습니다.

//Initialize blink status. 
 
var blinkStatus = false; 
 

 
//Check if status is changed, and run/stop blinking. 
 
var blinker, visibility; 
 
$('#button').on('click', function() { 
 
    blinkStatus = !blinkStatus; 
 
    if(blinkStatus){ 
 
     blinker = setInterval(function() { 
 
      visibility = $("#demo").css('visibility'); 
 
      
 
      if(visibility == 'hidden'){ 
 
       $("#demo").css('visibility', 'visible'); 
 
      }else{ 
 
       $("#demo").css('visibility', 'hidden'); 
 
      } 
 
     }, 500); 
 
     $("#button").text('Stop'); 
 
    }else{ 
 
     clearInterval(blinker); 
 
     $("#button").text('Start'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="demo">PAUSE</h1> 
 
<button id="button">Start</button>