<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #div1{

            width:500px;

            height: 500px;

            margin-top: 20px;

        }

    </style>

    <script>

        window.onload=function(){

            var aBtn=document.getElementsByTagName('input');

            var arrUrl=['images/img1.jpeg','images/img2.jpeg','images/img3.jpg','images/img4.jpeg','images/img5.jpg']

            var num=0;

            var timer=null;

            var oDiv=document.getElementById('div1');

            aBtn[0].onclick=function(){

                clearInterval(timer);

                timer=setInterval(function(){

                    oDiv.style.background='url('+arrUrl[num]+')';

                    num++;

                    num%=arrUrl.length;

                },800);

            }

            aBtn[1].onclick=function(){

                clearInterval(timer);

            }

        }

    </script>

</head>

<body>

   <input type="button" value="换背景">

   <input type="button" value="停">

   <div id="div1">hello world</div>

</body>

</html>

　　

简单的setInterval应用的更多相关文章

  1. setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法

    setInterval()和setTimeout()方法都是js原生的定时方法,当然它们两个的作用也是不同的,并且最近在做上下滚动公告栏的时候,发现了setInterval()非常令人抓狂的问题,那就 ...

  2. ReactJS入门学习一

    ReactJS入门学习一 阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么 ...

  3. React文档（十九）不使用ES6

    通常你会将一个React组件定义成一个普通的js类: class Greeting extends React.Component { render() { return <h1>Hell ...

  4. nodejs实现新闻爬虫

    作为费德勒的铁杆粉丝,每天早上都会在新浪体育里面的网球频道浏览费德勒新闻.由于只关注费德勒的新闻,所以每次都要在网页中大量的新闻中筛选相关信息,感觉效率好低,所以用node写了一个简单的爬虫程序通过每 ...

  5. nodeJS中定时任务cron的使用

    cron模块可以帮助我们在node中定时执行任务.如果你的定时需求是简单的setInterval()与setTimeout()计时器所无法满足的比较复杂的定时规则,推荐使用cron来配置. 安装cro ...

  6. javaScript（js）手写原生任务定时器源码

    javaScript(js)手写原生任务定时器 功能介绍 定时器顾名思义就是在某个特定的时间去执行一些任务,现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了,高复杂性早已是标配,而任务 ...

  7. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  8. Jquery实现简单到计时功能(setTimeout,setInterval)

    要实现一个标签或者按钮进行5秒到计时,非常简单,直接上代码: 倒计时:<span id="timeSpan1" style="color:red;font-size ...

  9. 【JavaScript】使用setInterval()函数作简单的轮询操作

    轮询(Polling)是一种CPU决策怎样提供周边设备服务的方式,又称"程控输出入"(Programmed I/O). 轮询法的概念是.由CPU定时发出询问.依序询问每个周边设备是 ...

随机推荐

  1. javaMail邮件发送的简单实现

    package com.test.mail; import java.util.Properties; import javax.mail.Message; import javax.mail.Ses ...

  2. WSAEventSelect IO复用模型

    1 今天帮一学习WSAEventSelect的网友排查一个测试用服务器端recv返回0的问题,出现这个问题直观判断一般是客户端socket关闭了,可是他的代码很简单并且是本机测试,通过wireshar ...

  3. 第一篇，jos

    关于jos环,使用递推公式简化问题和代码,关键在于找到正确的递推公式,可使用一个例子来寻找. (数学能力较差,只好打个表找规律了) 为方便取余运算,将编号1---n的下标表示为0--(n-1)     ...

  4. 通过mvn archetype:generate创建Maven项目模板慢的问题

    通过mvn archetype:generate这种交互方式来创建Maven项目模板的时候,经常会长时间卡在Generating project in Interactive mode这一行提示(图1 ...

  5. NPM使用介绍

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用 允许用户NPM服务器下载并安装别 ...

  6. 分布式版本控制系统Git-----1.Git 初识

    开始工作咯,师傅让我开始学习Git.刚接触我是懵逼的,"分布式版本控制系统"啥玩意啊这是,大家可不能从字面意思上理解啊,刚开始,版本控制么,我以为是团队合作的时候把开发工具.JDK ...

  7. 转：LoadRunner响应时间与用户体验时间不一致问题的深入分析

    在新一代一期项目非功能测试过程中,我们发现了LoadRunner测试响应时间与客户端实际用户体验时间不一致的现象.例如员工渠道上线后,客户体验时间远远超过了LoadRunner测试响应时间.本文针对这 ...

  8. ios UISearchBar搜索框的基本使用

    摘要: 小巧简洁的原生搜索框,漂亮而易用,如果我们的应用没有特殊需求,都可以使用它. iOS中UISearchBar(搜索框)使用总结 初始化:UISearchBar继承于UIView,我们可以像创建 ...

  9. 你我公益模式系统APP开发

    你我公益模式系统APP开发(微or电 158.1500.1390 小凡团队)你我公益系统开发,你我公益系统模式定制,你我公益系统开发软件,你我公益平台系统开发. 互联网世界无边无界,互联网创业者应敢于 ...

  10. 【Python@Thread】Semaphore&糖果机

    信号量适用与多线程竞争有限资源的情况. from atexit import register from time import ctime, sleep from threading import ...