簡單的Javascript按鈕2合1

Question

嗨，我只是遇到了一些問題，我試圖一鍵使文本閃爍

因此，單擊“打開”，還單擊“充當關閉”（如果將clicks值設置為on，該值為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

根據您對注釋的要求，我已經對您的代碼進行了稍微的編輯。

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

Answer 2

試試這個代碼。 單擊一個按鈕即可切換閃爍。

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