<!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. LeetCode 342. Power of Four

    Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Example:Giv ...

  2. 使用percona-xtrabackup实现对线上zabbix监控系统数据库mariadb5.5.47的主从同步

    使用percona-xtrabackup实现对线上zabbix监控系统数据库的主从同步 业务背景: zabbix3.0.4是业务的主要监控,部署在一台单机中,为避免数据丢失先对其做数据主从同步,因主数 ...

  3. VS2008的DLL项目添加了方法但是找不到怎么办？

      VS2008中建立了一个DLL项目,使用了一段时间后,在其中一个类中添加了一个方法,然后编译后,拷贝了新的.h文件到使用DLL的项目中,并且.dll和.lib也拷贝到了需要的位置,但是在目标项目中 ...

  4. IOleItemContainer的接口定义

      IOleItemContainer的接口定义

  5. Web前端之CSS_day3-4

    1.行高 1.1 初始行高 行高=文字大小+上间距+下间距 默认文字大小:16px 默认文字行高:18px 注意:行高=盒子的高度,可以让文字垂直居中显示 1.2 行高单位 a. px 行高设置多少就 ...

  6. [转]df命令

    linux中df命令参数功能:检查文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 语法:df [选项] 该命令各个选项的含义如下: -a 显示所有文件 ...

  7. sqlserver无法连接

    以下是我的检查信息及结果:1.telnet 192.168.1.100 1433 通过  telnet 116.3.15.198 1433 不通,提示“……无法打开连接,连接失败”的错误.2.通过端口 ...

  8. 为什么V8引擎这么快？

    目录(?)[-] 高速引擎的需求 语言本身的问题 JIT编译 JIT Compile 垃圾回收管理 内嵌缓存inline cache 隐藏类 内嵌缓存Inline Cache 机器语言的特性 附录熟悉 ...

  9. 【软件工程】电梯调度的初步实现 李亚文&&郭莉莉

    一.开门见山,代码粘 using System; using System.Collections.Generic; using System.Data; using System.Drawing; ...

  10. Jqurey DOM 操作详解

    一.获取 1.获取内容----.text()  .html()   .value() text() - 设置或返回所选元素的文本内容                         格式:$(选择器) ...