zoukankan      html  css  js  c++  java
  • 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="200px; overflow:hidden; background-color:#CCC;"><div id="text" style="100px;">显示随机颜色</div></div>
    </body>
    </html>
  • 相关阅读:
    Python--列表、元组
    python之helloworld
    JMeter添加压力机、下载文件
    JMeter接口测试
    Postman接口测试
    浅谈接口测试
    poj3974 最长回文串 exkmp
    GDOI2014 beyond(D2T3) exkmp
    hdu4333 扩展KMP
    poj 3080 KMP
  • 原文地址:https://www.cnblogs.com/dige1993/p/4637668.html
Copyright © 2011-2022 走看看