Question

假设我有一些id =＆＃34; circle＆＃34;和一些id =＆＃34;按钮＆＃34;的按钮。我需要做的就是：

圆圈默认闪烁;
当用户按下按钮时，圆圈停止闪烁;
当用户再次按下按钮时，圆圈开始闪烁;
等等。

我尝试使用以下代码执行此操作：

＆＃13;

var blinking = true;

function flash(elementId) {
  var bl = document.getElementById(elementId);
  bl.style.visibility = bl.style.visibility == "hidden" ? "visible" : "hidden";
}

function buttonClick() {
  if (blinking) {
    clearInterval(flash('circle'));
  } else {
    setInterval(flash('circle'), 200);
  }
}		
setInterval(flash('circle'), 200);

＆＃13;

<!DOCTYPE html>
<html>
	<body>
    <strong id="circle">&#x25cf</strong>
    <br>
    <button type="button" id="leftButton" onclick="buttonClick()">toggle</button>
  </body>
</html>

＆＃13;

但它并不是以理想的方式工作。如果纯JS中的解决方案代码太大，你可以用jquery编写它，它并不重要。

Answer 1

您正在调用flash方法，而是需要向setIterval提供回调。您还应该将间隔处理程序存储到某个变量，并在调用clearInterval时使用它。代码中缺少的最后一件事是每次点击都会切换blinking布尔值。

var interval;
function buttonClick() {
  if (blinking) {
    clearInterval(interval);
  } else {
    interval = setInterval(flash.bind(null, 'circle'), 200);
  }
  blinking = !blinking;
}
buttonClick();

或者你可以简单地使用function(){}，如下所示：

interval = setInterval(function() {
    flash('circle');
}, 200);

Answer 2

var blinkingInter = null, 
   circle = document.querySelector('#circle');
//@param ele element object
function toggleCircle(ele) {
    ele.classList.toggle('hidden');
}
// first parameter of setInterval is function 
blinkingInter = setInterval(function() {toggleCircle(circle)}, 
200);

function buttonClick() {
    if(blinkingInter !== null) {
         clearInterval(blinkingInter);
         // set blinkingInter to null
         blinkingInter = null;
    } else {
        blinkingInter = setInterval(function() {
             toggleCircle(circle)}, 200);
    }
}

Answer 3

此代码同时用于jquery和css：

css：

@keyframes blink {
0%{opacity: 0.0;}
50%{opacity: 1.0;}
100%{opacity: 0.0;}
}
.circle {
display: inline-block;
background: #f00;
width:30px;
height:30px;
border-radius:15px;
margin:auto;
margin-top: 20px;
margin-bottom: 20px;
}
.circle.blinker {
 animation: blink .3s infinite;
}
.jdhf {
 background: blue;
}

和jquery：

$("*").on("click","#button", function(e){
e.stopPropagation();
//verify if the div is blinking and then stop blinking
var f=$(".blinker").length;
if(f>0){
$("#circle").removeClass("blinker");
}
else {
$("#circle").addClass("blinker");
}
});

html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="circle" class="circle blinker">
</div>
<button id="button" class="jdhf">
Toggle animation
</button>

在此处试试：https://jsfiddle.net/amostk/ev5uusra/3/

Answer 4

由于切换不再用于两个函数，因此需要设置变量（类或隐藏标记）进行切换。这个例子显示了隐藏的输入而不是变量（因为布尔变量对于多个按钮不灵活，并且使用不透明度闪烁作为一个很酷的选项，我在Stack上找到了其他地方。

<div id="circle">
    text
</div>
<div id="button">
    <input type="hidden" value=0 />
    button
</div>
<script>
    var circle = setInterval(function(){blink()}, 1000);
    function blink() {
        $("#circle").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }
    $("#button").click(function() {
        var a = $(this).find("input[type='hidden']").val() == 0 ? 1 : 0;
        if ( a == 1 ) {
            clearInterval(circle);
        }else {
            circle = setInterval(function(){blink()}, 1000);
        }
        $(this).find("input[type='hidden']").val(a);
    });
</script>

JS：切换元素眨眼

4 个答案: