浅谈js的setInterval事件

前端技术 2023/09/03 JavaScript

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setinterval()用法

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

后面就两个参数code是你的js代码，millisec为时间间隔，以毫秒计

复制代码 代码如下:

<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>

下面举一个简单的例子。

例1

复制代码 代码如下:

function show(){ trace(\"每隔一秒我就会显示一次\");}
var sh;sh=setInterval(show,1000);
clearInterval(sh);

例2

复制代码 代码如下:

<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>

本文地址：https://www.stayed.cn/item/7554

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案