浅谈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 函数使用说明
Apr 07 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
layui分页效果实现代码
May 19 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
c#中的实现php中的preg_replace
2009/12/21 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python实现简单的代理服务器
2015/07/25 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
店长岗位的工作内容
2013/11/12 职场文书
经济管理专业自荐信
2013/12/30 职场文书
班主任寄语大全
2014/04/04 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
2015年环保局工作总结
2015/05/22 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书