浅谈js的setInterval事件
更新时间：2014年12月05日 11:37:49 投稿：hebedich
这篇文章主要介绍了js的setInterval方法的用法以及示例，非常的有用，这里推荐给小伙伴们
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的四种函数模式进行了详细的解释，并附上示例，方便小伙伴们理解并应用，希望对大家能有所帮助。2014-11-11
uniapp父子组件传值3种方法(props、slot和ref)
这篇文章主要给大家介绍了关于uniapp父子组件传值的3种方法,方法包括props、slot和ref,最近看到uniapp组件传值的方法,这里记录一下,需要的朋友可以参考下2023-07-07
JavaScript是一种无类型语言，但同时JavaScript提供了一种灵活的自动类型转换的处理方式。基本规则是，如果某个类型的值用于需要其他类型的值的环境中，JavaScript就自动将这个值转换成所需要的类型。2015-01-01
实例分析javascript中的call()和apply()方法
因项目需求去研究了下javascript中的call和apply方法，去百度看了几篇介绍JS中call和apply的文章，总觉得不是很好懂，这里写下我自己的理解，供网友们参考。2014-11-11
Math.pow函数想必大家都知道吧，本例介绍的是与其相反的函数2014-08-08
本文整理了一些js常用自定义公共函数如检查是否是日期格式、判断输入的字符是否为中文、判断是否为空、固定电话、手机号码等等2014-01-01
这篇文章主要介绍了JavaScript 闭包的相关资料,需要的朋友可以参考下2016-09-09
关于uni-app页面Page和组件Component生命周期执行的先后顺序
这篇文章主要介绍了关于uni-app页面Page和组件Component生命周期执行的先后顺序,文中提供了具体的代码,还不清楚的朋友可以来学习一下2023-04-04
本文主要介绍javascript中的String对象的用法，讲解的很详细，希望能给大家做一个参考。2016-06-06
下面的代码在HTML中是有效的，但在XHTML中则是无效的接下来为大家介绍下JavaScript在XHTML中的用法，感兴趣的朋友可以参考下哈2013-04-04
最新评论