浅谈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 相关文章推荐
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
javascript RegExp 使用说明
May 21 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
vue 扩展现有组件的操作
Aug 14 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使之能同时支持GIF和JPEG
2006/10/09 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python 容器总结整理
2017/04/04 Python
基于Python的关键字监控及告警
2017/07/06 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
Python实现DDos攻击实例详解
2019/02/02 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
Python imread、newaxis用法详解
2019/11/04 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
python time.strptime格式化实例详解
2021/02/03 Python
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
学校读书活动总结
2014/06/30 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书