<!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. [DFNews] What's coming in EnCase 7.08?

    论版本变化速度,AD绝对首屈一指,从FTK 4到现在的FTK 5也不过两年多时间,EnCase近期(初步预计8月初)将推出V7的新版本7.08,下面是一些新功能: Evidence Processor ...

  2. 手机app测试框架

    1.冒烟测试 一般使用mokey或其他自动化测试工具进行测试,保证软件的健壮性和可测性. 2.安装.卸装测试 直接在真机上安装.卸装(adb install 或 adb push到手机上直接安装) 第 ...

  3. c# 支付宝查单补单

    谁谁谁手机那边支付宝支付成功扣钱了,游戏里面却没有充钱,唯有写个补单程序. 首先要查单,查单接口(交易信息查询接口:https://mapi.alipay.com/gateway.do),服务名称:s ...

  4. Python TCP客户端

    import socket target_host="www.baidu.com" target_port=80 # 建立一个socket对象 client=socket.sock ...

  5. linux C学习笔记03--单链表

    单链表一直是程序员的基础,我也来复习下,下面是link.c中的代码,供main.c 调用,代码很简单,单链表的插入,删除,查找和遍历输出, #include <stdio.h> #incl ...

  6. compile error

    stray \241     程序有非法字符,如空格,引号等,一般因为从别的地方粘贴导致这个错误.

  7. IE6,IE7上设置body{overflow:hidden;}失效Bug

    IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...

  8. MYSQL服务器字符集设置

    修改默认字符集 vi /etc/my.cnf 在[mysqld]下面加入default-character-set=utf8 在[client]下面加入default-character-set=ut ...

  9. win8.1 vs2010 C++环境下 编译Android Adb.exe

    1 IntelliSense: cannot open source file "usb100.h"  adb 这是因为没有安装sdk造成的.win7下安装wdk,vs2010能够 ...

  10. 虚拟机VMware新增硬盘无法识别问题

    添加硬盘前的硬盘信息 在虚拟机中新增硬盘 添加后发现使用fdisk -l信息不变,新增的硬盘并没有识别,试过重启虚拟机硬盘就会识别出来.如果不想重启则按照如下方法: 先查看/proc/scsi/scs ...