个人中心
gpt4 book ai didi

javascript - JS : toggle element's blinking

转载 作者：太空宇宙 更新时间：2023-11-04 15:45:59 24 4
gpt4 key购买 nike

假设我有一些 id="circle"的元素和一些 id="button"的按钮。我需要做的就是:

  1. 圆圈默认闪烁；
  2. 当用户按下按钮时，圆圈停止闪烁；
  3. 当用户再次按下按钮时，圆圈开始闪烁；
  4. 等等。

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

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);
<!DOCTYPE html>
<html>
	<body>
    <strong id="circle">&#x25cf</strong>
    <br>
    <button type="button" id="leftButton" onclick="buttonClick()">toggle</button>
  </body>
</html>

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

最佳答案

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

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

关于javascript - JS : toggle element's blinking，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43569498/

24 4 0
文章推荐： c++ - LCS 的二维数组表
文章推荐： css - 不同颜色的 body 背景
文章推荐： c++ - 为什么我的字符串无法在 C++ 中正确打印？
文章推荐： html - 什么可能导致 CSS id 链接的 "border"属性被完全忽略？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com