簡單的JavaScript按鈕2在1

Question

IM嗨只是有一些問題， 進出口試圖使只需一個按鈕本文眨眼點擊

所以點擊 而且還點擊行爲爲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>