浅谈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 相关文章推荐
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
js基于canvas实现时钟组件
Feb 07 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
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python内置模块collections知识点总结
2019/12/19 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
美国创意之家:BulbHead
2017/07/12 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
迷你西餐厅创业计划书范文
2013/12/31 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
英语分层教学实施方案
2014/06/15 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
三方协议书
2015/01/27 职场文书
2016春节慰问信范文
2015/03/25 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
Django与数据库交互的实现
2021/06/03 Python