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

    今天就到这里!

  • 相关阅读:
    爬虫基础简介
    父子分类与无限分类
    Flask路由层
    Flask基础简介
    DRF之JWT签发,认证,群查
    DRF之JWT简介
    DRF之认证组件
    软件众包外包平台汇总
    Python与机器视觉(x)windows下import cv2报错dll
    【今日CV 视觉论文速览】Fri, 8 Feb 2019
  • 原文地址:https://www.cnblogs.com/web001/p/8053036.html
Copyright © 2011-2022 走看看