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

使用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 2

使用类描述符最容易实现的倍数

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

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

Answer 3

我强烈建议不要将setInterval（）用于此简单的工作，而应坚持使用CSS动画，如下所示：

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

 animation:Blink 2000ms linear 0s infinite none;

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

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

表格中的多个闪烁文本

3 个答案: