**
js：如何反复调用某一个函数
**
在做js替换css总一下属性时,总是代码重复导致，代码量很多,很容易出错,也不利于后期的维护,所以不如写一个函数，然后让他重复执行，废话不多说，直接上代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体旋转动画</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.wap{
position: absolute;
left: 30%;
width: 500px;
height: 500px;
border: red solid 2px;
}
.wap font{
position: absolute;
margin-top: 40%;
margin-left: 30%;
font-size: 30px;
opacity: 0;
}
.f2{
left: 10%;
/*animation: fonts 1s linear 3s 3;*/
}
.f3{`
left: 20%;
/*animation: fonts 1s linear 6s 3;*/
}
.f4{
left: 30%;
/*animation: fonts 1s linear 9s 3;*/
}
@keyframes fonts{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="wap">
<font class="f f1">开</font>
<font class="f f2">始</font>
<font class="f f3">旋</font>
<font class="f f4">转</font>
</div>
<button class="bnt f">开始</button>
<script>
window.onload = function(){
var font = document.querySelectorAll('.f');
var time = 0; //定义执行的时间（毫秒）
console.log(font[4]);
function fontPlay(count){//执行模块
setTimeout(function(){
font[count].style.opacity = 1;
font[count].style.animation ='fonts 1s linear 3';
},time);
}
var count = 0;//定义执行的次数
var sum = 0 定义执行的时间（毫秒）
function repeats(){//重复执行
w = setInterval(function(){
console.log(count);
fontPlay(count);
count++;
sum = 3000;
time = time+3000;
if(count==font.length-1){
clearInterval(w);
}
},sum);
}
font[4].onclick = function(){//确认开始
repeats();
}
}
</script>
</body>
</html>
先使用 *document.querySelectorAll* 方法获取所有类名叫 f 的标签，就会得到一个数组
然后把数组的下标都改成动态的，利用*setInterval*方法让 定义的count一直自加,
最后使用*onclick*触发开始就可以了
扫一扫
505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
