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

    今天就到这里!

  • 相关阅读:
    cssReset
    CSS的一些小技巧
    前端图标神器
    单例模式
    CSS 控制Html页面高度导致抖动问题的原因
    PHP中include()与require()的区别说明
    extends和implements区别
    静态,抽象类、接口、类库
    jQuery轮播图(手动点击轮播)
    jQuery实现大图轮播
  • 原文地址:https://www.cnblogs.com/web001/p/8053036.html
Copyright © 2011-2022 走看看