表格中多个闪烁的文本

Question

我在互联网上找到的这个JavaScript。有了这个，我只能让第一个文本框闪烁，而下一次我想让另一个文本框闪烁不起作用。我是一个初学者，感谢您的支持。

我在javascript中尝试了第二个变量，还复制了具有不同ID的javascript。还是没有运气...

在脑海中，我放置了：

 <script language="javascript">

function blinktext() {

  var f = document.getElementById('announcement');

  setInterval(function() {

    f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');

  }, 500);

}

</script>

在html中，我使用了：

<div id="announcement" class="rTableCell">

<span style="color: #99cc00;">groen</span></div>

我希望桌子上有多个方框可以闪烁我的桌子在这里：https : //zappi.info/faq-howto/hub/42-led-referentie-tabel

Answer 1

我强烈建议不要将setInterval（）用于此简单的工作，而应坚持使用CSS动画，如下所示：需要眨眼的元素应在其样式中包括此行...&nbsp;animation:Blink&nbsp;2000ms&nbsp;linear&nbsp;0s&nbsp;infinite&nbsp;none;然后将其独立添加到您的CSS部分中...&nbsp;@keyframes&nbsp;Blink{from{background:white;}&nbsp;to{background:black;}}

Answer 2

使用querySelectorAll和classList.toggle还要注意，我们添加了一个CSS类来隐藏元素。toggle如果不存在该呼叫，则将添加该呼叫，如果存在，则将其删除。function blinktext() {&nbsp; document.querySelectorAll('.announcement').forEach(e =>{&nbsp; setInterval(() => {&nbsp; &nbsp; console.log(e);&nbsp; &nbsp; e.classList.toggle('hide');&nbsp; }, 500);&nbsp; });}// We use an event listener to only run our code once the HTML is&nbsp;// loaded and ready to be read.document.addEventListener('DOMContentLoaded', () => {&nbsp; blinktext();});.hide {visibility: hidden;}<div class="announcement rTableCell">&nbsp; <span style="color: #99cc00;">groen</span></div><div class="announcement rTableCell">&nbsp; <span style="color: #99cc00;">groen</span></div><div class="rTableCell">&nbsp; <span style="color: #99cc00;">groen</span></div><div class="announcement rTableCell">&nbsp; <span style="color: #99cc00;">groen</span></div><div class="rTableCell">&nbsp; <span style="color: #99cc00;">groen</span></div><div class="announcement rTableCell">&nbsp; <span style="color: #99cc00;">groen</span></div><div class="announcement rTableCell">&nbsp; <span style="color: #99cc00;">groen</span></div>

Answer 3

使用类描述符最容易实现的倍数<div id="announcement" class="rTableCell blinking"><span style="color: #99cc00;">groen</span></div>function blink(target){&nbsp; &nbsp; return function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;target.style.visibility = (target.style.visibility == 'hidden' ? '' : 'hidden');&nbsp; &nbsp; }}let blinkers=document.getElementsByClassName('blinking');for(let blinker of blinkers){&nbsp; &nbsp;setInterval(blink(blinker), 500);}这样应该可以工作（您需要返回函数结构在方法中具有正确的引用）