码迷,mamicode.com
首页 > 其他好文 > 详细

setTimeout()与setInterval()——走马灯效果

时间:2015-07-10 23:41:44      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

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()——走马灯效果

标签:

原文地址:http://www.cnblogs.com/dige1993/p/4637668.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!