浅谈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 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
JavaScript变量声明详解
Nov 27 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
js实现微信聊天界面
Aug 09 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中养成7个面向对象的好习惯
2010/01/28 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
Python爬虫之网页图片抓取的方法
2018/07/16 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
初中国旗下的演讲稿
2014/08/28 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
撤诉状格式范本
2015/05/19 职场文书
让子弹飞观后感
2015/06/11 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang