浅谈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 相关文章推荐
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 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在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php实现快速排序法函数代码
2012/08/27 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
sklearn的predict_proba使用说明
2020/06/28 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
毕业自荐书
2013/12/09 职场文书
采购主管岗位职责
2014/02/01 职场文书
鲜花方阵解说词
2014/02/13 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
优秀班组长事迹
2014/05/31 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python