浅谈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 delete 属性的使用
Oct 08 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
Vue实现表格批量审核功能实例代码
May 28 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实现的随机广告显示代码
2007/06/14 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
PHP 读取和编写 XML
2014/11/19 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
javascript实现循环广告条效果
2017/12/12 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
详解python读取和输出到txt
2019/03/29 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
中学教师自我鉴定
2014/02/07 职场文书
通用自荐信范文
2014/03/14 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
数据库连接池
2021/04/06 MySQL