javascript - 目标类元素而不是带有闪烁动画脚本的文档主体

Question

我在万维网上找到了这个脚本 ;) 它非常适合我的需要，现在唯一的问题是我想定位单个 css 类元素(比如 .blink) 我如何修改它才能工作？认为我忽略了一些小事，因为我没有让它发挥作用。

function lightning()
{flash=flash+1;
if(flash==1){document.bgColor='white'; setTimeout("lightning()",100);}
if(flash==2){document.bgColor='black'; setTimeout("lightning()",90);}
if(flash==3){document.bgColor='red'; setTimeout("lightning()",85);}
if(flash==4){document.bgColor='blue'; setTimeout("lightning()",80);}
if(flash==5){document.bgColor='purple'; setTimeout("lightning()",75);}
if(flash==6){document.bgColor='white'; setTimeout("lightning()",70);}
if(flash==7){document.bgColor='black'; setTimeout("lightning()",65);}
if(flash==8){document.bgColor='red'; setTimeout("lightning()",60);}
if(flash==9){document.bgColor='blue'; setTimeout("lightning()",50);}
if(flash==10){document.bgColor='purple'; setTimeout("lightning()",40);}
if(flash==11){document.bgColor='black'; setTimeout("lightning()",30);}
if(flash==12){document.bgColor='white'; setTimeout("lightning()",25);}
if(flash==13){document.bgColor='red'; setTimeout("lightning()",20);}
if(flash==14){document.bgColor='blue'; setTimeout("lightning()",10);}
if(flash==15){document.bgColor='purple'; setTimeout("lightning()",5);}
if(flash==16){document.bgColor='white'; setTimeout("lightning()",1);}
if(flash==17){document.bgColor='black'; setTimeout("lightning()",1);}
if(flash==18){document.bgColor='blue'; setTimeout("lightning()",1);}
if(flash==19){document.bgColor='purple'; setTimeout("lightning()",1);}
if(flash==20){flash=0; setTimeout("lightning()",100);}
}
setTimeout("lightning()",1);

谢谢，希望能听到你们的声音!顺便说一句，也许有人有更好/更短的脚本具有类似的效果；)

Answer 1

你只需要查询你想要闪烁的类并遍历每个元素。我还更改为 switch 语句而不是 if 语句，并进行了一些格式化和更改，以便 flash 不是全局变量。

function lightning(className, flash = 1) {
  const flashes = {
    1: { color: "white", delay: 100 },
    2: { color: "black", delay: 90 },
    3: { color: "red", delay: 85 },
    4: { color: "blue", delay: 80 },
    5: { color: "purple", delay: 75 },
    6: { color: "white", delay: 70 },
    7: { color: "black", delay: 65 },
    8: { color: "red", delay: 60 },
    9: { color: "blue", delay: 50 },
    10: { color: "purple", delay: 40 },
    11: { color: "black", delay: 30 },
    12: { color: "white", delay: 25 },
    13: { color: "red", delay: 20 },
    14: { color: "blue", delay: 10 },
    15: { color: "purple", delay: 5 },
    16: { color: "white", delay: 1 },
    17: { color: "black", delay: 1 },
    18: { color: "blue", delay: 1 },
    19: { color: "purple", delay: 1 }
  };

  switch (flash) {
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
    case 6:
    case 7:
    case 8:
    case 9:
    case 10:
    case 11:
    case 12:
    case 13:
    case 14:
    case 15:
    case 16:
    case 17:
    case 18:
    case 19:
      Array.from(document.getElementsByClassName(className)).forEach(
        el => (el.style.backgroundColor = flashes[flash].color)
      );
      setTimeout(() => lightning(className, flash + 1), flashes[flash].delay);
    case 20:
      setTimeout(() => lightning(className), 100);
  }
}
setTimeout(() => lightning("my-class-name"), 1);

更新:做几乎相同事情的更简单的代码(延迟/颜色不是 100% 与原始代码相同):

function lightning(className, flash = 1) {
  const color = i => {
    switch (i % 5) {
      case 1:
        return "white";
      case 2:
        return "red";
      case 3:
        return "blue";
      case 4:
        return "purple";
      case 0:
        return "black";
    }
  };

  if (flash > 0 && flash < 20) {
    Array.from(document.getElementsByClassName(className)).forEach(
      el => (el.style.backgroundColor = color(flash))
    );
    setTimeout(() => lightning(className, flash + 1), 100 - flash * 5);
  } else {
    setTimeout(() => lightning(className), 100);
  }
}

setTimeout(() => lightning("my-class-name"), 1);