<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>

<input type="button" value="换背景吧" />
<input type="button" value="停" />

<script>
var aBtn = document.getElementsByTagName('input');
var arrUrl = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
var num = 0;
var timer = null;

var oBody = document.body;

aBtn[0].onclick = function (){
    
    clearInterval( timer );            // null、未定义
    //定时器是由用户控制的，要先关后开，防止用户手速过快连续点击
    
    timer = setInterval(function(){
        oBody.style.background  = 'url('+ arrUrl[num] +')';
        num++;
        num%=arrUrl.length;
    }, 1000);
};
aBtn[1].onclick = function (){
    clearInterval( timer );
};

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

</script>

</body>
</html>

JS-定时器换背景的更多相关文章

  1. js定时器的使用(实例讲解)

    在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);2.循环定 ...

  2. 移动Web与js定时器暂停或不准确计时的问题解决

    PC 上的 Firefox.Chrome 和 Safari 等浏览器,都会自动把未激活页面中的 JavaScript 定时器(setTimeout.setInterval)间隔最小值改为 1 秒以上: ...

  3. js定时器 特定时间执行某段程序的例子

    定时器想必大家并不陌生吧,在本文为大家详细介绍下js中是如何实现定时器的,具体原理及代码如下. 例子: $(function(){ var handler = function(){ //www.jb ...

  4. ppt怎么换背景图片|PPT换背景设置方法

    PPT怎么换背景?PPT背景可谓是PPT幻灯片的灵魂,优美绚丽的PPT背景能为自己做的PPT幻灯片锦上添花.今天,格子啦小编就教大家PPT换背景的方法,让你不再羡慕别人所做PPT的美丽背景,也可以自己 ...

  5. js 动态生成背景图 GeoPattern

    以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> ...

  6. js定时器setInterval()与setTimeout()

    js定时器setInterval()与setTimeout() 1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setT ...

  7. C#-WebForm JS定时器

    JS定时器: 1.window.setTimeout(function(){},3000) 延迟3秒执行 2.window.setInterval(function(){},3000) 也叫重复器,每 ...

  8. js秒换成天时分

    js秒换成天时分 function timeStamp( second_time ){ var time = parseInt(second_time) + "秒"; if( pa ...

  9. Vue清除所有JS定时器

    Vue清除所有JS定时器 在webpack + vue 的项目中如何在页面跳转的时候清除所有的定时器 JS定时器会有一个返回值(数字),通过这个返回值我们可以找到这个定时器 在vue项目中可以使用路由 ...

随机推荐

  1. Couchbase之个人描述及入门示例

    本文不打算抄袭官方或者引用他人对Couchbase的各种描述,仅仅是自己对它的一点理解(错误之处,敬请指出),并附上一个入门示例. ASP.NET Web项目(其他web开发平台也一样)应用规模小的时 ...

  2. str转unsigned int

    用法 1 参数:参数类型为char, 十六进制字符串形式:0X××××××[NUT],十进制字符串形式:×××××××[NUT],字符串的最大长度为16,字符串结尾符必须为ascii码值0(NUT). ...

  3. UNIX网络编程-基本API介绍（一）

    1.基本结构 大多数套接口函数都需要一个指向套接口地址结构的指针作为参数.每个协议族都定义它自己的套接口地址结构.这些结构的名字均以“sockaddr_”开头,并以对应每个协议族的唯一后缀结束. 1. ...

  4. JAVA设计模式之桥梁模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述桥梁(Bridge)模式的: 桥梁模式是对象的结构模式.又称为柄体(Handle and Body)模式或接口(Interface)模式. ...

  5. MySQL绿色版5.7以上安装教程

    写在前面:5.7增加了安全性,默认root密码不在为空,而是初始化时随机生成一个root密码,改root密码的方式也不一样了 下载地址 http://dev.mysql.com/downloads/m ...

  6. 【转】JVM 堆内存设置原理

    堆内存设置 原理 JVM堆内存分为2块:Permanent Space 和 Heap Space. Permanent 即 持久代(Permanent Generation),主要存放的是Java类定 ...

  7. Selenium+Python+Eclipse网页自动化集成环境配置（附简单的测试程序）

    最近公司在给我们培训,主要是网页自动化测试的,现在的工作每天都是测APP,刚刚入门,不过,当我看了别人写的bug之后,就觉得不会觉得能够发现bug多么多么的厉害了. 前两周的时间一直在搭建自动化测试的 ...

  8. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

  9. Unity协程(Coroutine)管理类——TaskManager工具分享

    博客分类: Unity3D插件学习,工具分享 源码分析   Unity协程(Coroutine)管理类——TaskManager工具分享 By D.S.Qiu 尊重他人的劳动,支持原创,转载请注明出处 ...

  10. [翻译]Shape comparison language[转]

        link: http://www.cnblogs.com/yhlx125/p/3635623.html   Shape comparison language 首先说说我遇到的一个问题: IR ...