javascript - 目标类元素而不是带有闪烁动画脚本的文档正文
问题描述
我在万维网上找到了这个脚本;)它非常适合我的需要,现在唯一的事情是我想针对单个 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);
谢谢,希望听到你们的声音!顺便说一句,也许有人有更好/更短的脚本,效果相似;)
解决方案
您只需要查询要闪烁的类并遍历每个元素。我还更改为 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);
推荐阅读
- php - Php 阵列 6 x 6 爆炸
- python - pywinauto 不将控件标识为 TabControl
- javascript - ag-grid - 数据更改时调整细节高度
- node.js - 如何在sequelize中从父表中获取数据
- php - 仅显示不在某个表中的值。MySQL
- react-native - 在 React Native 中从 Fire 库中读取特定值
- php - php mysqli 获取数据并将两个变量除以固定(2)/两位小数
- javascript - Heroku 错误:找不到模块“优化器”导致内部服务器错误
- javascript - 如何使用 VueJS 获取 json Web API 的值
- webhooks - Postmates API 发送订购详情