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

    今天就到这里!

  • 相关阅读:
    servlet
    grep命令
    sort排序命令
    shell脚本面试
    查看远端的端口是否通畅3个简单实用案例!
    mail命令
    linux系统优化的方法
    shell数组
    shell函数介绍语法说明及基本例子
    循环结构的多个控制命令对比与实际案例
  • 原文地址:https://www.cnblogs.com/web001/p/8053036.html
Copyright © 2020-2023  润新知