setInterval()
作用
这个函数可以将一个函数每隔一段时间执行一次
参数
1.回调函数，该函数会每隔一段时间被调用一次
2.每次调用间隔的时间，单位是毫秒
返回值
返回一个Number类型的数据,这个数字用来作为定时器的唯一标识
使用
写法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取count
var count = document.getElementById("count");
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
if(num == 11){
//关闭定时器
clearInterval(timer);
}
},1000);
//clearInterval()可以用来关闭一个定时器
//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
//clearInterval(timer);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
写法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var c = document.getElementById("count");
var num = 1;
var fun = function() {
c.innerHTML = num++;
if (num == 11) {
//关闭定时器
clearInterval(timer);
}
}
var timer = setInterval(fun, 1000);//这种方式fun一定不能写成fun()
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
写法三：
每隔一段时间调用一次某对象中的某方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var count = null;//由于count声明为window全局变量，所以下面两种调用方式都可以
//如果不声明为全局变量，则只能使用 setInterval(count.fun, 1000); 的调用方式
window.onload = function() {
c = document.getElementById("count");
var num = 1;
var timer = null;
function Count() {
this.fun = function() {
c.innerHTML = num++;
if (num == 11) {
//关闭定时器
clearInterval(timer);
}
}
}
count = new Count();//为count赋值
timer = setInterval('count.fun()', 1000);//调用Count对象的fun()方法，这里的fun后面必须跟（）
//timer = setInterval(count.fun, 1000);//调用Count对象的fun()方法，这里的fun后面不能加 ()
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
写法四：
调用某全局方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var count = null;
var num = 1;
var timer = null;
var c=null;//这里必须把c声明为全局属性，
var fun = function() {
c.innerHTML = num++;
if (num == 11) {
//关闭定时器
clearInterval(timer);
}
}
window.onload = function() {
c = document.getElementById("count");
timer = setInterval('fun()', 1000);
//timer = setInterval(fun, 1000);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
写法五
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var c = document.getElementById("count");
var num = 1;
var fun = function() {
c.innerHTML = num++;
if (num == 11) {
//关闭定时器
clearInterval(timer);
}
}
var timer = setInterval(function(){
fun();
}, 1000);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
总结
1.setInterval()该方法能每隔一段时间调用某个方法
2.如果传入setInterval()方法中的是函数对象是局部函数，调用方式为：setInterval(fun,time); fun后面不能接括号
3.如果传入setInterval()方法中的是函数对象是全局函数，调用方式有两种：
一：setInterval(fun,time); fun后面不能接括号
二：setInterval('fun()',time); fun后面必须带括号