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. 烦人的win10的输入法

    这段时间在使用win10,被win10的输入法折腾的要死要死的... 通过度娘把它设置得跟win7使用习惯差不多了, (见:http://jingyan.baidu.com/article/b2c18 ...

  2. struts原理

    Struts是一个开源的web框架. 为什么会有struts? 因为我们对mvc理解的不同,可能造成不同公司写程序的时候,规范不统一,这样不利于程序的维护和扩展,所以我们有必要用一个统一的规范来开发项 ...

  3. [.NET] 使用Json.NET提供依赖注入功能(Dependence Injection)

    [.NET] 使用Json.NET提供依赖注入功能(Dependence Injection) 前言 在一些小型项目的开发情景里,系统不需要大型DI Framework所提供的:单一对象生成.生命周期 ...

  4. ENVI软件操作之【数据的显示操作】

    数据的显示操作主要包括以下的一些简单窗口操作 1.文件列表管理 1)可用的波段列表Available Bands List,使用于存取ENVI图像文件和显示图像文件的主要控制对话框.无论何时何地打开一 ...

  5. Dense.js - 响应式的视网膜（Rtina）图像支持

    Dense 是一款 jQuery 插件,它提供一个简单的方法为设备提供精密像素比的图像,为你的网站带来视网膜支持,清除模糊,图像更清晰.通过简单地包括 jQuery 插件的页面上,就能实现响应式的视网 ...

  6. HTML5 表单新增属性

    1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...

  7. 【NodeJS 学习笔记02】入门资源很重要

    前言 在我映像中,异步最早出现与ajax,当时我还在搞.net,然后.net居然出了一个异步的控件...... 虽然我最后知道了他不是异步的......然后,前端异步用得特别多,如果不是异步的程序,你 ...

  8. iOS 正则 检测是否为手机号

    - (BOOL)validateMobile:(NSString *)mobileNum { NSString *regex = @"^1[3|5|7|8][0-9]\\d{8}$" ...

  9. 传说中的AutoCAD公司 - 欧特克（Autodesk）招聘开发顾问-上海或北京

    如果您热衷新技术,垂涎科技前沿,对编程有狂热的热情,乐于帮助别人打造解决方案,喜爱分享和交流,英文沟通无障碍,来吧,把简历丢过来! 如果您刚毕业不久,那也不要因为工作经历尚浅而怯步,我们也非常欢迎您! ...

  10. [转]MOSS通过此命令注册模板，web应用程序可以根据stp模块生成网站集

    注:C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\bin          stsadm –o add ...