浅谈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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
JS新手入门数组处理的实用方法汇总
Apr 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
PHP分页显示制作详细讲解
2008/11/19 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
深入研究React中setState源码
2017/11/17 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
JAVA程序员自荐书
2014/01/30 职场文书
超市总经理岗位职责
2014/02/02 职场文书
班主任寄语2015
2015/02/26 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python