<!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. 开放地址法实现HashTable

    前注:本文不是讲解Java类库的Hashtable实现原理,而是根据计算机哈希表原理自己实现的一个Hashtable. HashTable内部是用数组存放一个(Key-Value pair)键值对的引 ...

  2. Capture a Screen Shot

    using System; using System.Runtime.InteropServices; using System.Drawing; using System.Drawing.Imagi ...

  3. [POJ 1988] Cube Stacking (带值的并查集)

    题目链接:http://poj.org/problem?id=1988 题目大意:给你N个方块,编号从1到N,有两种操作,第一种是M(x,y),意思是将x所在的堆放到y所在的堆上面. 第二种是C(x) ...

  4. 31. Flatten Binary Tree to Linked List

    Flatten Binary Tree to Linked List Given a binary tree, flatten it to a linked list in-place. For ex ...

  5. 【caffe-windows】 caffe-master 之 matlab接口配置

    平台环境: win10 64位 caffe-master  vs2013 Matlab2016a 第一步: 打开\caffe-master\windows下的CommonSettings.props文 ...

  6. 简单实用的Windows命令（二）

    昨天简单的记录了几个非常简单实用的Windows命令,不过我又想起来还有两个我在实际的工作中也是经常用到的命令——PING和IPCONFIG,不过我在工作中的使用都是非常简单的,用PING命令检测对应 ...

  7. google快捷键

          使用快捷键的好处不言自明,如果能过直接访问google自然有对应的帮助文档以供参考,不过为了方便起见,还是将自己觉得有用的信息收藏到自己访问无障碍的地方吧! 一:以下快捷键适用于Windo ...

  8. 不让Win7休眠的设置

    1:原因 目前有一个项目是采用微服务的架构搭建的,其中一个微服务的数据库是在一位同事的电脑上(Win7系统),一旦这台电脑休眠,对应的数据库服务就访问不了,所以,需要保持此台电脑永不休眠. 2:傻瓜式 ...

  9. jquery常用正则表达式

    1.邮箱验证正则表达式:/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/ 2.手机验证正则表达式:/^ ...

  10. textContent 与innerText

    转自下面这位大神: http://zhangyaochun.iteye.com/blog/1391370 其实关于这textContent与innerText有很多碎碎的东西,不过个人觉得还是一个不错 ...