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后面必須帶括號