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

今天就到这里!

时间: 2024-11-05 19:34:31

启用setInterval()定时器更换背景的相关文章

停止setInterval()定时器函数的执行

停止setInterval()定时器函数的执行:本章节介绍一下如何停止定时器函数的运行,希望能够给需要的朋友带来帮助.setinterval()函数的用法可以参阅window.setInterval()方法一章节.特别说明:定时器setinterval()函数每次执行都会返回一个当前函数执行的唯一标识.使用clearInterval()函数可以停止定时器函数的执行,参数是setinterval()函数返回的标识.代码实例: <!DOCTYPE html> <html> <he

前端开发:setTimeout与setInterval 定时器与异步循环数组

前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的,在与博友的分享中可以学到新的知识.得到先驱者的指正.解决工作中遇到的难题.近一个月工作繁忙,新的文章也迟迟未写,今天呢,过来深入了解一下 关于javascript定时器的知识: setTimeout与setInterval简述 setTimeout与setInterval使用方法基本相同,他们接受两

setInterval 定时器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

js中setTimeout/setInterval定时器用法示例

js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 function timedMsg() { setTimeout("alert('7 seconds!')",5000)//5秒后弹出信息 } setTimeout("timedMsg()",2000);//2秒后执行方法 timedMsg setInterval:在指定的时间间隔内

第一节:setTimeout和setInterval定时器

区别:  setInterval函数的用法与setTimeout完全一致,区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行. 取消定时器:(clearTimeout和clearInterval)  setTimeout和setInterval函数,都返回一个表示计数器编号的整数值,将该整数传入clearTimeout和clearInterval函数,就可以取消对应的定时器. <script> //定时器 异步运行 function hello() {

在setInterval()定时器里面传参数

我们知道setInterval(A,B)函数接受两个参数:A-要运行的函数名称,B-运行时间间隔.而当我们要往A函数里面传参数的时候,就会捉急了,因为setInterval只接受函数名,这时候闭包就帮我们大忙了. 定义工具函数foo 1 var foo=function(some){ 2 var i=0; 3 return function(){ 4 i++; 5 if(i>=5){ 6 alert(some); 7 clearInterval(stop); 8 } 9 } 10 }; 11 v

javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.setInterval与setTimeout定时器的用法与区别.讲得不对的地方,烦请大家指正,还望前辈.大牛多多指教! 二.window对象与document对象的用法和区别 window是全局对象,document是window对象的一个属性它也是一个对象.如图: document对象指的页面这个文档

js定时器: window.clearInterval与window.setInterval的用法

window.setInterval() 功能:按照指定的周期(以毫秒计)来调用函数或计算表达式. 语法:setInterval(code,millisec) 解释:code:在定时时间到时要执行的JavaScript代码串. millisec:设定的定时时间,用毫秒数表示. 返回值:定时器的ID值,可用于clearInterval()方法停止指定的定时器. 注:setInterval()方法会不停地调用函数,直到用clearInterval()终止定时或窗口被关闭. window.clearI

window.clearInterval与window.setInterval的用法 定时器的设置

window.setInterval() 功能:按照指定的周期(以毫秒计)来调用函数或计算表达式. 语法:setInterval(code,millisec) code:在指定时间到时要执行的JavaScript代码串或函数. millisec:设定的定时时间,用毫秒数表示. 返回值:定时器的ID值,可用于clearInterval()方法停止指定的定时器. 注:setInterval()方法会不停地调用函数,直到用clearInterval()终止定时或窗口被关闭. window.clearI