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()——走马灯效果的更多相关文章

  1. Javascript 笔记与总结(2-13)定时器 setTimeout 和 setInterval

    定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...

  2. 使用setTimeout模拟setInterval效果

    由于现在部分浏览器基于对系统性能的优化,在使用setInterval的时候,在页面没有获得关注的状态,浏览器可以会自动将setInterval终端,等到该页面重新获得关注时再开启.这样就会使得一些基于 ...

  3. 使用setTimeout 来实现setInterval的效果

    直接上代码,实现的核心就是在延时的情况下递归的调用自己, x=0 y=-1 function countMin( ) { y=y+1 document.displayMin.displayBox.va ...

  4. vue 实现走马灯效果

    Part.1  问题 在写一个H5页面时遇到一个需求,头部公告需要滚动变换,需要实现一个走马灯效果 Part.2  实现 我的做法:利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 ...

  5. 浅谈JS之setTimeout与setInterval

    概念 setTimeout与clearTimeout,以及setInterval与clearInterval均属于Window对象方法. 方法 描述 setTimeout 在指定的毫秒数后调用函数或计 ...

  6. 前端开发:setTimeout与setInterval 定时器与异步循环数组

    前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...

  7. setTimeout和setInterval从入门到精通

    我们在日常web前端开发中,经常需要用到定时器方法. 前端中的定时器方法是浏览器提供的,并不是ECMAScript规范中的.是window对象的方法. 浏览器中的定时器有两种, 一种是每间隔一定时间执 ...

  8. setTimeout和setInterval定时器使用详解测试

    var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...

  9. setTimeout,setInterval原理

    function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...

随机推荐

  1. Git教程推荐

    推荐:廖雪峰的官方网站-Git教程,面向初学者,浅显易懂.

  2. 第三题 有如下Student 对象, private String name; private int age; private int score; private String classNum; 其中,classNum 表示学生的班号,例如“class05”。 有如下List List list = new ArrayList();

    list.add(new Student("Tom", 18, 100, "class05")); list.add(new Student("Jer ...

  3. Mac入门推荐(写给Mac小白)

    本人第一次接触Mac是在2016年10月中旬,那时由于对苹果系统的不熟悉,导致自己一开始的时候用的很不习惯,甚至还想换回Windows系统.总所周知,苹果系统的软件比较少,在此我向大家推荐一些个人觉得 ...

  4. zookeeper应用场景-java

    声明,本文是复制别人的文章,感觉还行,原文:http://www.cnblogs.com/xymqx/p/4465610.html 本人热爱技术,跪求有好的技术文章希望大家多多分享,谢谢.... Zo ...

  5. log4net其中layout节点的配置说明

    其中layout节点的配置说明:        %m(message):输出的日志消息:        %n(newline):换行:        %d(datetime):输出当前语句运行的时刻: ...

  6. oracle中创建数据库用户,并授权

    --查看表空间文件路径select * from dba_data_files where tablespace_name=$TABLESPACE CREATE TABLESPACE usr_aa D ...

  7. [快速幂][NOIP2012]转圈游戏

    转圈游戏 题目描述 n 个小伙伴(编号从 0 到 n-1)围坐一圈玩游戏.按照顺时针方向给 n 个位置编号,从0 到 n-1.最初,第 0 号小伙伴在第 0 号位置,第 1 号小伙伴在第 1 号位置, ...

  8. Fixed Partition Memory Management UVALive - 2238 建图很巧妙 km算法左右顶点个数不等模板以及需要注意的问题 求最小权匹配

    /** 题目: Fixed Partition Memory Management UVALive - 2238 链接:https://vjudge.net/problem/UVALive-2238 ...

  9. 【CSAPP笔记】3. 浮点数

    回想起刚学C语言时,我对浮点数的印象大概是"能够表示小数"的数据类型.还死记硬背过例如什么"小数用double存,用%f输出"这类的话.实际上呢,浮点数可以用这 ...

  10. winform Form窗体和UserControl用户空间嵌入Panel容器并填充

    private void sbtbflList_Click(object sender, EventArgs e) { ucxmflList ucfl = new ucxmflList();//用户控 ...