1)简单的等待界面：这种做法之所以说简单，就是在用法发送了处理命令后，立即在页面的某个地方替换一个waiting的图片，比如一个转圈的GIF，一张Loading的图片等，这种不称之为进度条，顶多就是个等待条，但通常还是可以给用户带来那么点满足，在业务量不大的情况下，也够用了。
2)真实的等待进度：比如说，我要在B/S系统中实现一个数据导入的功能，数据文件总共有100个，每个文件包含成千上万的数据，导入过程可能需要15分钟，那么我还用一个图片在那边打转吗？现在这样还是不够的，我可能需要让使用者知道，我当前处理的是第几个文件，还剩下几个，处理的百分比，并显示一个加载的真实进度条，这个进度条要如实反映处理的百分比。
实现1：由于用户处理的数据量大，可以在文件导入过程中，循环计算进度，并将进度信息存储在上下文中，并在前台页面定时从上下文读取进度数据，并在页面显示。这种方法思路比较直接。
实现2：使用观察者模式，实现进度主动通知。思路是：在处理过程中，计算进度信息，并将进度数据通知给观察者，前台页面定时向观察者咨询进度，并将进度显示到页面中。
js实现进度条的方法：
1.setTimeout和clearTimeout
setTimeout和clearTimeout
|
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
>
|
效果图：
2.setInterval和clearInterval
效果图：
3.setTimeout和setInterval区别
setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() ，setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭，或者让 code 自身再次调用 setTimeout()。