浅谈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 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
vue无限轮播插件代码实例
May 10 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冒泡排序算法代码详细解读
2011/07/17 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
Dom 结点创建 基础知识
2011/10/01 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Django model反向关联名称的方法
2018/12/15 Python
Python常用特殊方法实例总结
2019/03/22 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Python实现Linux监控的方法
2019/05/16 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
初二物理教学反思
2014/01/29 职场文书
社区工作感言
2014/02/21 职场文书
法律专业求职信
2014/05/24 职场文书
李敖北大演讲稿
2014/05/24 职场文书
球队口号
2014/06/18 职场文书
2014年度考核工作总结
2014/12/24 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
大学班长竞选稿
2015/11/20 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers