浅谈js的setInterval事件

首页 > 网络编程 > JavaScript > 基础知识 更新日期: 2016-05-02
这篇文章主要介绍了js的setInterval方法的用法以及示例,非常的有用,这里推荐给小伙伴们

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

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

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

代码如下:

<body>
   <div   style="position:relative; height:1000px; width:1000px; background-color:#666;">
    <div 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" 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 ></div>
<button onclick="int=window.clearInterval(int)">Stop interval</button>


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 浅谈JavaScript中setInterval和setTimeout的使用问题
    这篇文章主要介绍了浅谈JavaScript中setInterval和setTimeout的使用问题,作者建议在任务庞大时尽量避免使用setInterval,需要的朋友可以参考下说到setInterval,就不得不提到setTimeout,二者都是用于定时执行某函数,区别在于setTimeout 只执行一次,而setInterval可以一直连续不断执行下去,典 ...
  • 浅谈jQuery中setInterval()方法
    这篇文章主要介绍了浅谈jQuery中setInterval方法,十分的简单实用,有需要的小伙伴可以参考下.定义和用法: setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID ...
  • 浅谈js中变量初始化
    这篇文章主要介绍了浅谈js中变量初始化的相关资料,需要的朋友可以参考下我在js里面写了一个去除首尾空格及特定字符的函数.代码如下: 代码如下:function trim(str, charlist) {    return str.replace(new RegExp('^[\\s'+charlist+']+|[\\s'+charlist+']+$', 'g ...
  • 浅谈setTimeout与setInterval
    浅谈setTimeout与setInterval
    实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码.不过这两个函数还是有区别的最新写代码中时,看到项目中有人用到了 setTimeout(fun,0),于是想总结一下.个人理解,如果有错误的地方还请指出.THX 要想理解JavaS ...
  • 浅谈jQuery中的事件
    浅谈jQuery中的事件
    本文给大家分享的是个人关于jQuery中事件的理解,主要向大家介绍了jQuery中事件的绑定,合成.以及事件冒泡.阻止事件等内容,希望大家能够喜欢.JQuery事件初见 1.JQuery中的事件绑定 其实呢,JQuery中标准的事件绑定是这样写下:(如下) 代码如下:$("#btn").bind("click",fun ...
  • 浅谈JS日期(Date)处理函数
    这篇文章主要整理了一下JS日期Date处理函数,算是对自己近期学习javascript的一个小小的总结,这里分享给大家获取日期 1.Date() --返回当日的日期和时间. 2.getDate() --从 Date 对象返回一个月中的某一天 (1 ~ 31). 3.getDay() --从 Date 对象返回一周中的某一天 (0 ~ 6). 4.getMon ...
猜你喜欢