浅谈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操作cookie_获取与修改代码
May 21 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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版
2006/10/09 PHP
缓存技术详谈―php
2006/12/14 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
详解php中 === 的使用
2016/10/24 PHP
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
JS高级技巧(简洁版)
2018/07/29 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
python编写Logistic逻辑回归
2020/12/30 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
房地产开发计划书
2014/01/10 职场文书
旷课检讨书3000字
2014/02/04 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
房产委托公证书
2014/04/08 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
MySQL存储过程及语法详解
2022/08/05 MySQL