表格中多个闪烁的文本

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动画，如下所示：

需要眨眼的元素应在其样式中包括此行...

 animation:Blink 2000ms linear 0s infinite none;

然后将其独立添加到您的CSS部分中...

 @keyframes Blink{from{background:white;} to{background:black;}}

Answer 2

使用querySelectorAll和classList.toggle

还要注意，我们添加了一个CSS类来隐藏元素。toggle如果不存在该呼叫，则将添加该呼叫，如果存在，则将其删除。

function blinktext() {

  document.querySelectorAll('.announcement').forEach(e =>{

  setInterval(() => {

    console.log(e);

    e.classList.toggle('hide');

  }, 500);

  });

}

// We use an event listener to only run our code once the HTML is 

// loaded and ready to be read.

document.addEventListener('DOMContentLoaded', () => {

  blinktext();

});

.hide {

visibility: hidden;

}

<div class="announcement rTableCell">

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

<div class="announcement rTableCell">

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

<div class="rTableCell">

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

<div class="announcement rTableCell">

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

<div class="rTableCell">

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

<div class="announcement rTableCell">

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

<div class="announcement rTableCell">

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

    return function(){

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

    }

}

let blinkers=document.getElementsByClassName('blinking');

for(let blinker of blinkers){

   setInterval(blink(blinker), 500);

}

这样应该可以工作（您需要返回函数结构在方法中具有正确的引用）