快捷導(dǎo)航

淺談js的setInterval事件

更新時(shí)間：2014年12月05日 11:37:49 投稿：hebedich

這篇文章主要介紹了js的setInterval方法的用法以及示例，非常的有用，這里推薦給小伙伴們

setInterval() 方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
setinterval()用法

setInterval(code,millisec[,"lang"])

后面就兩個(gè)參數(shù)code是你的js代碼，millisec為時(shí)間間隔，以毫秒計(jì)

復(fù)制代碼代碼如下:

<body>

   <div id="content"  style="position:relative; height:1000px; width:1000px; background-color:#666;">

    <div id="one" style="position:absolute;top:0px; left:0px; height:100px; width:100px; background-color:red;"></div>

    </div>

        <script>

          var one=document.getElementById('one')

          var x=0;

          var y=0;

          var xs=10;

          var ys=10;

          function scroll(){

              x+=xs;

              y+=ys;

              if(x>=document.getElementById('content').offsetWidth-one.offsetWidth-20 || x<=0)

              {

                  xs=-1*xs;

              }

            if(y>=document.getElementById('content').offsetHeight-one.offsetHeight-20 || y<=0)

              {

                  ys=-1*ys;

              }

              one.style.left=x;

              one.style.top=y;

          }

          dt=setInterval(scroll,100);

          one.onmouseover=function(){

          clearInterval(dt);    

          };

          one.onmouseout=function(){

          dt=setInterval(scroll,100);

          };

        </script>

</body>

下面舉一個(gè)簡單的例子。

例1

復(fù)制代碼代碼如下:

function show(){ trace("每隔一秒我就會顯示一次");}

var sh;sh=setInterval(show,1000);

clearInterval(sh);

例2

復(fù)制代碼代碼如下:

<form>

<input type="text" id="clock" size="35" />

<script language=javascript>

var int=self.setInterval("clock()",50)

function clock(){var t=new Date()

document.getElementById("clock").value=t

}

</script>

</form>

<div id="clock"></div>

<button onclick="int=window.clearInterval(int)">Stop interval</button>

您可能感興趣的文章: