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

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) {&nbsp; const flashes = {&nbsp; &nbsp; 1: { color: "white", delay: 100 },&nbsp; &nbsp; 2: { color: "black", delay: 90 },&nbsp; &nbsp; 3: { color: "red", delay: 85 },&nbsp; &nbsp; 4: { color: "blue", delay: 80 },&nbsp; &nbsp; 5: { color: "purple", delay: 75 },&nbsp; &nbsp; 6: { color: "white", delay: 70 },&nbsp; &nbsp; 7: { color: "black", delay: 65 },&nbsp; &nbsp; 8: { color: "red", delay: 60 },&nbsp; &nbsp; 9: { color: "blue", delay: 50 },&nbsp; &nbsp; 10: { color: "purple", delay: 40 },&nbsp; &nbsp; 11: { color: "black", delay: 30 },&nbsp; &nbsp; 12: { color: "white", delay: 25 },&nbsp; &nbsp; 13: { color: "red", delay: 20 },&nbsp; &nbsp; 14: { color: "blue", delay: 10 },&nbsp; &nbsp; 15: { color: "purple", delay: 5 },&nbsp; &nbsp; 16: { color: "white", delay: 1 },&nbsp; &nbsp; 17: { color: "black", delay: 1 },&nbsp; &nbsp; 18: { color: "blue", delay: 1 },&nbsp; &nbsp; 19: { color: "purple", delay: 1 }&nbsp; };&nbsp; switch (flash) {&nbsp; &nbsp; case 1:&nbsp; &nbsp; case 2:&nbsp; &nbsp; case 3:&nbsp; &nbsp; case 4:&nbsp; &nbsp; case 5:&nbsp; &nbsp; case 6:&nbsp; &nbsp; case 7:&nbsp; &nbsp; case 8:&nbsp; &nbsp; case 9:&nbsp; &nbsp; case 10:&nbsp; &nbsp; case 11:&nbsp; &nbsp; case 12:&nbsp; &nbsp; case 13:&nbsp; &nbsp; case 14:&nbsp; &nbsp; case 15:&nbsp; &nbsp; case 16:&nbsp; &nbsp; case 17:&nbsp; &nbsp; case 18:&nbsp; &nbsp; case 19:&nbsp; &nbsp; &nbsp; Array.from(document.getElementsByClassName(className)).forEach(&nbsp; &nbsp; &nbsp; &nbsp; el => (el.style.backgroundColor = flashes[flash].color)&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; setTimeout(() => lightning(className, flash + 1), flashes[flash].delay);&nbsp; &nbsp; case 20:&nbsp; &nbsp; &nbsp; setTimeout(() => lightning(className), 100);&nbsp; }}setTimeout(() => lightning("my-class-name"), 1);更新：更简单的代码几乎可以做同样的事情（延迟/颜色与原始代码中的 100% 不同）：function lightning(className, flash = 1) {&nbsp; const color = i => {&nbsp; &nbsp; switch (i % 5) {&nbsp; &nbsp; &nbsp; case 1:&nbsp; &nbsp; &nbsp; &nbsp; return "white";&nbsp; &nbsp; &nbsp; case 2:&nbsp; &nbsp; &nbsp; &nbsp; return "red";&nbsp; &nbsp; &nbsp; case 3:&nbsp; &nbsp; &nbsp; &nbsp; return "blue";&nbsp; &nbsp; &nbsp; case 4:&nbsp; &nbsp; &nbsp; &nbsp; return "purple";&nbsp; &nbsp; &nbsp; case 0:&nbsp; &nbsp; &nbsp; &nbsp; return "black";&nbsp; &nbsp; }&nbsp; };&nbsp; if (flash > 0 && flash < 20) {&nbsp; &nbsp; Array.from(document.getElementsByClassName(className)).forEach(&nbsp; &nbsp; &nbsp; el => (el.style.backgroundColor = color(flash))&nbsp; &nbsp; );&nbsp; &nbsp; setTimeout(() => lightning(className, flash + 1), 100 - flash * 5);&nbsp; } else {&nbsp; &nbsp; setTimeout(() => lightning(className), 100);&nbsp; }}setTimeout(() => lightning("my-class-name"), 1);