Question

嗨，我刚刚遇到一些问题，我只想点击一下按钮就试图让这个文字闪烁

所以点击ON 并且单击Acts为OFF（如果点击值设置为on，则为1）

我是JS的新手，任何帮助都会受到赞赏

＆＃13;

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

＆＃13;

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

＆＃13;

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

简单的Javascript按钮2合1

2 个答案: