简单的JavaScript按钮2在1

  • Z时代
  • 2024-01-10
  • 分类：问答

IM嗨只是有一些问题， 进出口试图使只需一个按钮本文眨眼点击简单的JavaScript按钮2在1

所以点击 而且还点击行为为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>

回答：

试试这个代码。这通过一个按钮来切换闪烁。

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

回答：

我根据您对评论的要求，稍微编辑了您的代码。

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

以上是 简单的JavaScript按钮2在1 的全部内容， 来源链接： utcz.com/qa/260058.html

回到顶部