服务器之家

服务器之家 > 正文

浅谈js的setInterval事件

时间:2021-05-04 19:10     来源/作者:JS教程网

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>
标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
返回顶部