浅谈js的setInterval事件

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>

赞 (0)

相关推荐

  • JS小功能(setInterval实现图片效果显示时间)实例代码

    JS小功能(setInterval实现图片效果显示时间)实例代码

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <script type="text/javascript">        function toDou(n) {            if (n < 10) {                return '0' + n;            }            else {

  • js setTimeout opener的用法示例详解

    复制代码 代码如下: $("#saveInfo").show(); setTimeout( '$("#saveInfo").hide();',3000); if(opener&& !opener.closed){ opener.location.reload(true); } setTimeout : 延迟多长时间执行什么方法,具体使用:http://www.jb51.net/article/35535.htm opener: 指parent表示父窗

  • js中setTimeout()与clearTimeout()用法实例浅析

    本文实例分析了js中setTimeout()与clearTimeout()用法.分享给大家供大家参考.具体分析如下: setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout. <input type = text id = aaa > <input type = button value = stop id = bb onclick = bb()> <scrip

  • JS中setInterval、setTimeout不能传递带参数的函数的解决方案

    在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数, 这就需要想方法解决. 一.采用字符串形式:--(缺陷)参数不能被周期性改变 setInterval("foo(id)",1000); 二.匿名函数包装 (推荐) 复制代码 代码如下: window.setInterval(function() { foo (id); }, 1000); 这样就可以周期性执行foo(id)这个函数,而且把变量id传递进去: 三

  • Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

    Document自带的方法: 循环执行:var timeid = window.setInterval("方法名或方法","延时");window.clearInterval(timeid); 定时执行:var tmid = window.setTimeout("方法名或方法", "延时");window.clearTimeout(tmid); 举例说明: A.当要执行的方法中不需要参数时 复制代码 代码如下: <scr

  • JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

  • JS中setTimeout()的用法详解

    JS中setTimeout()的用法详解

    setTimeout setTimeout 语法例子 用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTimeout 停止 计分及计秒的 counter clearTimeout Set flag 1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTimeOut()停止 1.5 计分及秒的co

  • Js中setTimeout()和setInterval() 何时被调用执行的用法

    定义setTimeout()和setInterval()经常被用来处理延时和定时任务.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.从定义上我们可以看到两个函数十分类似,只不过前者执行一次,而后者可以执行多次,两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数.很简单的定义,使用起来也很简单,但有时候我们的代码并不是按照我们的想象

  • setinterval()与clearInterval()JS函数的调用方法

    本文实例讲述了setinterval()与clearInterval()JS函数的调用方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.

  • 浅谈js的setInterval事件

    setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. setinterval()用法 setInterval(code,millisec[,"lang"]) 后面就两个参数code是你的js代码,millisec为时间间隔,以毫秒计 复制代码 代码如下: <body>    <div id="conten

  • 浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancel

  • 浅谈js键盘事件全面控制

    主要分四个部分 第一部分:浏览器的按键事件 第二部分:兼容浏览器 第三部分:代码实现和优化 第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypr

  • 浅谈js中的宏任务和微任务

    浅谈js中的宏任务和微任务

    目录 1.关于JavaScript 2.JavaScript事件循环 3.宏任务和微任务 4.拓展宏任务微任务 下面一道关于宏任务和微任务的题: setTimeout(function(){ console.log('1') }); new Promise(function(resolve){ console.log('2'); resolve(); }).then(function(){ console.log('3') }); console.log('4') 试问一下上面代码的执行顺序是啥

  • 浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

    -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <script> function skin1() { var oL=docum

  • 浅谈angularJS中的事件

    什么是事件 •如同浏览器响应浏览器层的事件,比如鼠标点击.获得焦点,angular应用也可以响应angular事件 •angular事件系统并不与浏览器的事件系统相通,我们只能在作用域上监听angular事件而不是DOM事件 事件传播 因为作用域是有层次的,所以我们可以在作用域链上传递事件: •使用$emit冒泡事件,事件从当前子作用域冒泡到赋作用域,在产生事件的作用域之上的所有作用域都会收到这个事件的通知 $emit()方法带有两个参数: name  要发出的事件的名称 args   一个参数

  • 浅谈JS原生Ajax,GET和POST

    javascript/js的ajax的GET请求: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else

  • 浅谈js中的this问题

    this this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上 this的最终指向的是那个调用它的对象(这里其实并不完全对,this的指向有时候会很微妙,得靠自己去慢慢体会) 只有方法在对象上,对象调用当前方法,指向当前对象 function fnThis(){ let user='js'; console.log(this.user)//undefined console.log(this)//global(window) } fnThis(); 这

  • 浅谈js文件引用方式及其同步执行与异步执行

    任何以appendChild(scriptNode) 的方式引入的js文件都是异步执行的 (scriptNode 需要插入document中,只创建节点和设置 src 是不会加载 js 文件的,这跟 img 的与加载不同 ) html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的 html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的 html文件中的<script>标签src

  • 浅谈js中的引用和复制(传值和传址)

    好像一般很少人讲到js中的引用和复制,不过弄清楚这个概念可以帮助理解很多东西 先讲一下很基础的东西,看看js中几种数据类型分别传的什么 引用:对象.数组.函数 复制:数字.布尔 字符串单独说明,因为它的特殊性,无法确定是传递引用还是复制数值(因为字符串的值是没法改变的,所以纠结这个问题也是没意义的)但是用于比较的时候显然是属于传值比较(稍后具体说比较的事) 下面讲一下在使用中的具体体现 最普通的使用就是赋值了 var a = 1; var b = a; //赋的是a的复制值 b ++; aler

随机推荐