setTimeout()与setInterval()——走马灯效果
JavaScript中的setTimeout()与setInterval()都是指延时执行某一操作。
但setInterval()指每隔指定时间执行某操作,会循环不断地执行该操作;setTimeout()只延时指定时间后执行该操作,且只执行一次。
setTimeout()在某种情况下也能实现setInterval()的效果,比较经典的例子就是在在函数内部调用自己。向下面这样:
function example(){
...
setTimeout("example()", 1000);
}
下面给一个走马灯的例子:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>走马灯</title>
<script>
var i = -100; function setColor()
{
var color = new Array("red","blue","green","black","turquoise","coral","orange","lime","violet");
var i = Math.round(Math.random()*8);
document.getElementById("text").style.color = color[i];
} function setScroll()
{
var text = document.getElementById("text");
text.style.marginLeft = i + "px";
i = i + 10;
if(i > 200){i = -100;}
setTimeout("setScroll()",500);
} function changeColor()
{
setInterval("setColor()",500);
} function func()
{
changeColor();
setScroll();
}
</script>
</head> <body onLoad="func()">
<div style="width:200px; overflow:hidden; background-color:#CCC;"><div id="text" style="width:100px;">显示随机颜色</div></div>
</body>
</html>
setTimeout()与setInterval()——走马灯效果的更多相关文章
- Javascript 笔记与总结(2-13)定时器 setTimeout 和 setInterval
定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...
- 使用setTimeout模拟setInterval效果
由于现在部分浏览器基于对系统性能的优化,在使用setInterval的时候,在页面没有获得关注的状态,浏览器可以会自动将setInterval终端,等到该页面重新获得关注时再开启.这样就会使得一些基于 ...
- 使用setTimeout 来实现setInterval的效果
直接上代码,实现的核心就是在延时的情况下递归的调用自己, x=0 y=-1 function countMin( ) { y=y+1 document.displayMin.displayBox.va ...
- vue 实现走马灯效果
Part.1 问题 在写一个H5页面时遇到一个需求,头部公告需要滚动变换,需要实现一个走马灯效果 Part.2 实现 我的做法:利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 ...
- 浅谈JS之setTimeout与setInterval
概念 setTimeout与clearTimeout,以及setInterval与clearInterval均属于Window对象方法. 方法 描述 setTimeout 在指定的毫秒数后调用函数或计 ...
- 前端开发:setTimeout与setInterval 定时器与异步循环数组
前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...
- setTimeout和setInterval从入门到精通
我们在日常web前端开发中,经常需要用到定时器方法. 前端中的定时器方法是浏览器提供的,并不是ECMAScript规范中的.是window对象的方法. 浏览器中的定时器有两种, 一种是每间隔一定时间执 ...
- setTimeout和setInterval定时器使用详解测试
var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...
- setTimeout,setInterval原理
function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...
随机推荐
- PHP内核探索之变量(3)- hash table
在PHP中,除了zval, 另一个比较重要的数据结构非hash table莫属,例如我们最常见的数组,在底层便是hash table.除了数组,在线程安全(TSRM).GC.资源管理.Global变量 ...
- MySQL配置文件mysql.ini参数详解、MySQL性能优化
my.ini(Linux系统下是my.cnf),当mysql服务器启动时它会读取这个文件,设置相关的运行环境参数. my.ini分为两块:Client Section和Server Section. ...
- Windows台的FailOver群集简介
首先,您需要有一些服务器硬件方面知识. 我们介绍Windows平台的FailOver群集,以多个站点场景为例,如下图示: 八个结点NODE,Windows的FailOver群集,依赖SAN存储同步各个 ...
- Java继承中成员方法的overload(重载/过载)
如果Java基础类有一个方法名被"过载"使用多次,在衍生类里对那个方法名的重新定义就不会隐藏任何基础类的版本.所以无论方法在这一级还是在一个基础类中定义,过载都会生效. publi ...
- Android 手机卫士9--短信备份
AToolActivity.java protected void showSmsBackUpDialog() { //1,创建一个带进度条的对话框 final ProgressDialog prog ...
- Spring4学习笔记 - Bean的生命周期
1 Spring IOC 容器对 Bean 的生命周期进行管理的过程: 1)通过构造器或工厂方法创建 Bean 实例 2)为 Bean 的属性设置值和对其他 Bean 的引用 3)调用 Bean 的初 ...
- JQuery读取XML文件
<?xml version="1.0" encoding="utf-8" ?> <taxrates> <taxrate id=&q ...
- RequireJS使用注意地方
使用RequireJS做异步模块加载,有几点值得注意的地方: 1.模块定义两种写法 1. 存在依赖的函数式定义 如果模块存在依赖:则第一个参数是依赖的名称数组:第二个参数是函数,在模块的所有依赖加载完 ...
- JavaScript学习10 JS数据类型、强制类型转换和对象属性
JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...
- 使用eclipse开发android准备工作
1.官网下载JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html (注 ...