目标类元素而不是带有闪烁动画脚本的文档正文

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