本文小结setInterval在调用函数时使用到的方法和调试效果.
以下为代码格式;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Interval</title> 6 <style> 7 p { 8 font-size: 26px; 9 } 10 11 .box { 12 height: 38px; 13 line-height: 38px; 14 border-bottom: 1px solid #000; 15 } 16 </style> 17 </head> 18 <body> 19 <h1>setInterval 函数调用方法:<br/>区别:1.有参数or没有参数;2.使用匿名函数or声明函数;</h1> 20 <p>1.没有参数,使用匿名函数;运行成功;</p> 21 <p id="text-0" class="box"></p> 22 <p>2.有参数,使用匿名函数;运行成功;</p> 23 <p id="text-1" class="box"></p> 24 <p>3.没有参数,使用声明函数,格式:"(function_name(),delay)";只运行一次,且在载入时马上运行;</p> 25 <p id="text-2" class="box"></p> 26 <p>4.没有参数,使用声明函数,格式:"(function_name,delay)";运行成功;</p> 27 <p id="text-3" class="box"></p> 28 <p>5.有参数,使用声明函数;格式"(function_name(index),delay)";只运行一次,且在载入时马上运行;</p> 29 <p id="text-4" class="box"></p> 30 <p>6.有参数,使用声明函数;格式:使用匿名函数封装-"(function(){function_name(index);},delay)";运行成功;</p> 31 <p id="text-5" class="box"></p> 32 </body> 33 <script type="text/javascript"> 34 window.onload = function main() { 35 var t1 = document.getElementById("text-0"), 36 t2 = document.getElementById("text-1"), 37 t3 = document.getElementById("text-2"), 38 t4 = document.getElementById("text-3"), 39 t5 = document.getElementById("text-4"), 40 t6 = document.getElementById("text-5"), 41 T1 = null, 42 T2 = null, 43 T3 = null, 44 T4 = null, 45 T5 = null, 46 T6 = null, 47 clock = 0; 48 T1 = setInterval(function () { 49 t1.innerHTML += "*"; 50 clock++; 51 if (clock > 60) { 52 clearInterval(T1); 53 clearInterval(T2); 54 clearInterval(T3); 55 clearInterval(T4); 56 clearInterval(T5); 57 clearInterval(T6); 58 } 59 }, 2000); 60 T2 = setInterval(function () { 61 t2.innerHTML = clock; 62 }, 2000); 63 T3 = setInterval(timer3(), 2000); 64 function timer3() { 65 t3.innerHTML += "*"; 66 } 67 68 T4 = setInterval(timer4, 2000); 69 function timer4() { 70 t4.innerHTML += "*"; 71 } 72 73 T5 = setInterval(timer5(clock), 2000); 74 function timer5(x) { 75 t5.innerHTML = x; 76 } 77 78 T6 = setInterval(function () { 79 timer6(clock); 80 }, 2000); 81 function timer6(x) { 82 t6.innerHTML = x; 83 } 84 } 85 </script> 86 </html>
以下为纯文本格式,如果浏览器无法查看代码格式,请阅读以下内容;
/*-------------------------------------*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interval</title>
<style>
p {
font-size: 26px;
}
.box {
height: 38px;
line-height: 38px;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<h1>setInterval 函数调用方法:<br/>区别:1.有参数or没有参数;2.使用匿名函数or声明函数;</h1>
<p>1.没有参数,使用匿名函数;运行成功;</p>
<p id="text-0" class="box"></p>
<p>2.有参数,使用匿名函数;运行成功;</p>
<p id="text-1" class="box"></p>
<p>3.没有参数,使用声明函数,格式:"(function_name(),delay)";只运行一次,且在载入时马上运行;</p>
<p id="text-2" class="box"></p>
<p>4.没有参数,使用声明函数,格式:"(function_name,delay)";运行成功;</p>
<p id="text-3" class="box"></p>
<p>5.有参数,使用声明函数;格式"(function_name(index),delay)";只运行一次,且在载入时马上运行;</p>
<p id="text-4" class="box"></p>
<p>6.有参数,使用声明函数;格式:使用匿名函数封装-"(function(){function_name(index);},delay)";运行成功;</p>
<p id="text-5" class="box"></p>
</body>
<script type="text/javascript">
window.onload = function main() {
var t1 = document.getElementById("text-0"),
t2 = document.getElementById("text-1"),
t3 = document.getElementById("text-2"),
t4 = document.getElementById("text-3"),
t5 = document.getElementById("text-4"),
t6 = document.getElementById("text-5"),
T1 = null,
T2 = null,
T3 = null,
T4 = null,
T5 = null,
T6 = null,
clock = 0;
T1 = setInterval(function () {
t1.innerHTML += "*";
clock++;
if (clock > 60) {
clearInterval(T1);
clearInterval(T2);
clearInterval(T3);
clearInterval(T4);
clearInterval(T5);
clearInterval(T6);
}
}, 2000);
T2 = setInterval(function () {
t2.innerHTML = clock;
}, 2000);
T3 = setInterval(timer3(), 2000);
function timer3() {
t3.innerHTML += "*";
}
T4 = setInterval(timer4, 2000);
function timer4() {
t4.innerHTML += "*";
}
T5 = setInterval(timer5(clock), 2000);
function timer5(x) {
t5.innerHTML = x;
}
T6 = setInterval(function () {
timer6(clock);
}, 2000);
function timer6(x) {
t6.innerHTML = x;
}
}
</script>
</html>
/*-------------------------------------*/
以下为网页效果图;
