浅谈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 相关文章推荐
基于node.js的快速开发透明代理
Dec 25 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
vue组件name的作用小结
May 23 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
Node.js Domain 模块实例详解
Mar 18 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
几种显示数据的方法的比较
2006/10/09 PHP
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
python实现统计代码行数的方法
2015/05/22 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
Python字符串及文本模式方法详解
2020/09/10 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
联强国际笔试题面试题
2013/07/10 面试题
爱情保证书范文
2014/02/01 职场文书
工作检讨书大全
2015/01/26 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
紧急迫降观后感
2015/06/15 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python