本文小结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>
/*-------------------------------------*/
以下为网页效果图;
时间： 2024-08-26 08:35:16