浅谈js的setInterval事件


Posted in Javascript onDecember 05, 2014

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>
Javascript 相关文章推荐
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
js打开word文档预览操作示例【不是下载】
May 23 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
浅谈javascript中createElement事件
Dec 05 #Javascript
javascript的push使用指南
Dec 05 #Javascript
javascript结合ajax读取txt文件内容
Dec 05 #Javascript
javascript实现切换td中的值
Dec 05 #Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 #Javascript
深入分析js的冒泡事件
Dec 05 #Javascript
Javascript解析URL方法详解
Dec 05 #Javascript
You might like
PHP mkdir()定义和用法
2009/01/14 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
JavaScript基础知识之数据类型
2012/08/06 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
python 调用c语言函数的方法
2017/09/29 Python
在python中画正态分布图像的实例
2019/07/08 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
python em算法的实现
2020/10/03 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
公司员工检讨书
2014/02/08 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
社会发展项目建议书
2014/08/25 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android
详解OpenCV曝光融合
2022/04/29 Python