http://www.jb51.net/article/61113.htm（轉載出處）
setTimeout和clearTimeou
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<html>
<head>
<title>進度條</title>
<style type=
"text/css"
>
.container{
width:450px;
border:1px solid
#6C9C2C;
height:25px;
}
#bar{
background:
#95CA0D;
float:left;
height:100%;
text-align:center;
line-height:150%;
}
</style>
<script type=
"text/javascript"
>
function
run(){
var
bar = document.getElementById(
"bar"
);
var
total = document.getElementById(
"total"
);
bar.style.width=parseInt(bar.style.width) + 1 +
"%"
;
total.innerHTML = bar.style.width;
if
(bar.style.width ==
"100%"
){
window.clearTimeout(timeout);
return
;
}
var
timeout=window.setTimeout(
"run()"
,100);
}
window.onload =
function
(){
run();
}
</script>
</head>
<body>
<div class=
"container"
>
<div id=
"bar"
style=
"width:0%;"
></div>
</div>
<span id=
"total"
></span>
</body>
</html>
|
效果圖：
<html>
<head>
<title>進度條</title>
<style type=
"text/css"
>
.processcontainer{
width:450px;
border:1px solid
#6C9C2C;
height:25px;
}
#processbar{
background:
#95CA0D;
float:left;
height:100%;
text-align:center;
line-height:150%;
}
</style>
<script type=
"text/javascript"
>
function
setProcess(){
var
processbar = document.getElementById(
"processbar"
);
processbar.style.width = parseInt(processbar.style.width) + 1 +
"%"
;
processbar.innerHTML = processbar.style.width;
if
(processbar.style.width ==
"100%"
){
window.clearInterval(bartimer);
}
}
var
bartimer = window.setInterval(
function
(){setProcess();},100);
window.onload =
function
(){
bartimer;
}
</script>
</head>
<body>
<div class=
"processcontainer"
>
<div id=
"processbar"
style=
"width:0%;"
></div>
</div>
</body>
</html>
|
效果圖：
3.setTimeout和setInterval區別
setTimeout() 只執行 code 一次。如果要多次調用，請使用 setInterval() ，setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉，或者讓 code 自身再次調用 setTimeout()。
希望本文所述對大家的javascript程序設計有所幫助。