浅谈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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
php下使用以下代码连接并测试
2008/04/09 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
python中的__slots__使用示例
2015/02/26 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
python使用多进程的实例详解
2018/09/19 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
致200米运动员广播稿
2014/02/06 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
医学检验专业自荐信
2014/09/18 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
SQL Server Agent 服务无法启动
2022/04/20 SQL Server