关于setInterval定时器的一个小实例,点击换背景按钮,让其每一秒换一个背景,点击停止就让其停止。
html代码 <input id="btn1" type="button" value="开启换背景"/> <input id="btn2" type="button" value="停止换背景"/> <div class="box"></div>
css
.box{width:500px;height:500px;border:1px solid #f5f5f5}
js代码
<script> window.onload=function(){ var aBtn1=document.getElementById("btn1"); var aBtn2=document.getElementById("btn2"); var oBox=document.getElementsByClassName("box")[0]; var arrUrl=["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg"]; var num=0; var timer=null; function fn(){ oBox.style.background=‘url("‘+arrUrl[num]+‘")‘; num++; num%=arrUrl.length; } aBtn1.onclick=function(){ clearInterval(timer);//快速点击按钮时,先清除定时器,然后再执行就不会使定时器崩溃 timer = setInterval(fn,1000); }; aBtn2.onclick=function(){ clearInterval(timer); } }; </script>
注意:关于setInterval还有就是这里在调用fn函数时候不需要传参所以后面不要加括号。当然这是网盘认为的原因,也欢迎各大神给我指出问题。
今天就到这里!