JavaScript 中的闪烁背景颜色

Question

我试图通过编写 3 毫秒间隔的 2 个函数来在红色和白色之间获得闪烁的背景颜色，但不幸的是，它不适用于我名为“Bad”的设置元素类。

有人可以帮助我我做错了什么吗？

代码如下：

function badBG(){
    var colors = ['Red','White']
        for(i=0; i<2; i++){
            colorBG = colors[Math.floor(Math.random()*2)];
            // console.log(colorBG)
        }
        
        return colorBG 
}

function blinkBG(){
    blink = badBG()
    document.getElementsByClassName('Bad').style.backgroundColor = blink;
}


setInterval("blinkBG()",300);

所有功能和 CSS 方法都是直截了当的。

Answer 1

最好使用 CSS 动画：

.bad{
  padding:30px;
  animation: blink 300ms infinite;
}

@keyframes blink{
  0%, 49.9% {
    background: white;
  }
  50%, 99.9% {
    background: red;
  }
}

<div class="bad">I'm very bad</div>

Answer 2

虽然我建议仅在 CSS 级别上解决这个问题，如 Alexander Nenashev 所示，但也有一个干净的 JavaScript 解决方案。

您只需将

setInterval

与

classList.toggle()

结合使用即可在 CSS 中切换类。通过添加/删除它来表示：

const BAD = document.querySelectorAll('.bad');

BAD.forEach(element => {
  setInterval(function() {
    element.classList.toggle('bg-red');
  }, 300)
})

.bad{
  padding:30px;
}

.bg-red {
  background-color: red;
}

<div class="bad">I'm very bad</div>