• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 众包
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
麦兜家园
优秀是一种习惯
博客园    首页    新随笔    联系   管理    订阅  订阅
启用setInterval()定时器更换背景

关于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函数时候不需要传参所以后面不要加括号。当然这是网盘认为的原因,也欢迎各大神给我指出问题。

今天就到这里!

posted on 2017-12-17 19:52  麦兜家园  阅读(966)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3