浅谈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 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
webpack 3.X学习之多页面打包的方法
Sep 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
商场活动策划方案
2014/01/24 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
绿里奇迹观后感
2015/06/15 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
学习十八大的感悟
2015/08/11 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
分享7个 Python 实战项目练习
2022/03/03 Python