|
现在很多网站会用到进入网站特效，到网页没有加载完成的时候，会有一个loding特效，加载完了之后才能看到页面，今天就带着做一个js进度条效果，今天要做的效果是纯js进度条加载，没有用到框架，方便大家进行深入理解： 首先我们要进行js进度条的布局js进度条布局如下： [size=0.9][size=0.9]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
43
| [size=0.9][size=0.9]</script[size=0.9]>
[size=0.9]<style type[size=0.9]=[size=0.9]"text/css" id[size=0.9]=[size=0.9]'css'[size=0.9]>
#progress [size=0.9]{
position[size=0.9]: fixed[size=0.9];
background[size=0.9]: #000[size=0.9];
top[size=0.9]: [size=0.9]0[size=0.9];
left[size=0.9]: [size=0.9]0[size=0.9];
width[size=0.9]: [size=0.9]100[size=0.9]%;
height[size=0.9]: [size=0.9]100[size=0.9]%;
z[size=0.9]-index[size=0.9]: [size=0.9]99999[size=0.9];
[size=0.9]}
#progress p [size=0.9]{
width[size=0.9]: 0px[size=0.9];
height[size=0.9]: 30px[size=0.9];
border[size=0.9]-radius[size=0.9]: 3px[size=0.9];
background[size=0.9]: #ffcccc[size=0.9];
color[size=0.9]: #[size=0.9]330000[size=0.9];
font[size=0.9]-size[size=0.9]: 14px[size=0.9];
font[size=0.9]-weight[size=0.9]: bold[size=0.9];
line[size=0.9]-height[size=0.9]: 30px[size=0.9];
text[size=0.9]-align[size=0.9]: center[size=0.9];
overflow[size=0.9]: hidden[size=0.9];
font[size=0.9]-family[size=0.9]: [size=0.9]'Microsoft yahei'[size=0.9];
position[size=0.9]: absolute[size=0.9];
top[size=0.9]: [size=0.9]50[size=0.9]%;
left[size=0.9]: [size=0.9]50[size=0.9]%;
margin[size=0.9]-top[size=0.9]: [size=0.9]-15px[size=0.9];
margin[size=0.9]-left[size=0.9]: [size=0.9]-250px[size=0.9];
[size=0.9]}
body [size=0.9]{
overflow[size=0.9]: hidden[size=0.9];
[size=0.9]}
[size=0.9]</style[size=0.9]>
[size=0.9]</head[size=0.9]>
[size=0.9]<body[size=0.9]>
[size=0.9]<div id[size=0.9]=[size=0.9]'progress'[size=0.9]>
[size=0.9]<p[size=0.9]>[size=0.9]0[size=0.9]%</p[size=0.9]>
[size=0.9]</div[size=0.9]>
[size=0.9]</body[size=0.9]>
|
写完了之后，就要开始写js进度条加载的js代码了，代码如下：[size=0.9][size=0.9]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
| [size=0.9] [size=0.9]var oP [size=0.9]= document.[size=0.9]getElementById[size=0.9]([size=0.9]'progress'[size=0.9]).[size=0.9]getElementsByTagName[size=0.9]([size=0.9]'p'[size=0.9])[size=0.9][[size=0.9]0[size=0.9]][size=0.9];
[size=0.9]var oCss [size=0.9]= document.[size=0.9]getElementById[size=0.9]([size=0.9]'css'[size=0.9])[size=0.9];
[size=0.9]function move[size=0.9](num[size=0.9]) [size=0.9]{
clearInterval[size=0.9](oP.[size=0.9]timer[size=0.9])[size=0.9];
oP.[size=0.9]timer [size=0.9]= setInterval[size=0.9]([size=0.9]function [size=0.9]([size=0.9]) [size=0.9]{
[size=0.9]if [size=0.9](parseInt[size=0.9](oP.[size=0.9]innerHTML[size=0.9]) [size=0.9]< num[size=0.9]) [size=0.9]{
[size=0.9]var s [size=0.9]= parseInt[size=0.9](oP.[size=0.9]innerHTML[size=0.9]) [size=0.9]+ [size=0.9]1[size=0.9];
[size=0.9]var w [size=0.9]= [size=0.9]500 [size=0.9]* s [size=0.9]/ [size=0.9]100[size=0.9];
oP.[size=0.9]innerHTML [size=0.9]= s [size=0.9]+ [size=0.9]'%'[size=0.9];
oP.[size=0.9]style.[size=0.9]width [size=0.9]= w [size=0.9]+ [size=0.9]'px'[size=0.9];
[size=0.9]} [size=0.9]else [size=0.9]{
clearInterval[size=0.9](oP.[size=0.9]timer[size=0.9])[size=0.9];
[size=0.9]if [size=0.9](num [size=0.9]== [size=0.9]100[size=0.9]) [size=0.9]{
oP.[size=0.9]parentNode.[size=0.9]parentNode.[size=0.9]removeChild[size=0.9](oP.[size=0.9]parentNode[size=0.9])[size=0.9];
oCss.[size=0.9]parentNode.[size=0.9]removeChild[size=0.9](oCss[size=0.9])[size=0.9];
[size=0.9]var oScript [size=0.9]= document.[size=0.9]getElementsByClassName[size=0.9]([size=0.9]'pMove'[size=0.9])[size=0.9];
[size=0.9]var length [size=0.9]= oScript.[size=0.9]length
[size=0.9]for [size=0.9]([size=0.9]var i [size=0.9]= length [size=0.9]- [size=0.9]1[size=0.9]; i [size=0.9]>= [size=0.9]0[size=0.9]; i[size=0.9]--[size=0.9]) [size=0.9]{
oScript[size=0.9][i[size=0.9]].[size=0.9]parentNode.[size=0.9]removeChild[size=0.9](oScript[size=0.9][i[size=0.9]][size=0.9])[size=0.9];
[size=0.9]}
[size=0.9]}
[size=0.9]}
[size=0.9]}[size=0.9], [size=0.9]10[size=0.9])[size=0.9];
[size=0.9]}[size=0.9];
[size=0.9]</script[size=0.9]>
|
因为考虑到js执行是有先后的顺序的，这里大家一定要注意才行 js进度条全部源码展示：[size=0.9][size=0.9]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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| [size=0.9][size=0.9]<style type[size=0.9]=[size=0.9]"text/css" id[size=0.9]=[size=0.9]'css'[size=0.9]>
#progress [size=0.9]{
position[size=0.9]: fixed[size=0.9];
background[size=0.9]: #000[size=0.9];
top[size=0.9]: [size=0.9]0[size=0.9];
left[size=0.9]: [size=0.9]0[size=0.9];
width[size=0.9]: [size=0.9]100[size=0.9]%;
height[size=0.9]: [size=0.9]100[size=0.9]%;
z[size=0.9]-index[size=0.9]: [size=0.9]99999[size=0.9];
[size=0.9]}
#progress p [size=0.9]{
width[size=0.9]: 0px[size=0.9];
height[size=0.9]: 30px[size=0.9];
border[size=0.9]-radius[size=0.9]: 3px[size=0.9];
background[size=0.9]: #ffcccc[size=0.9];
color[size=0.9]: #[size=0.9]330000[size=0.9];
font[size=0.9]-size[size=0.9]: 14px[size=0.9];
font[size=0.9]-weight[size=0.9]: bold[size=0.9];
line[size=0.9]-height[size=0.9]: 30px[size=0.9];
text[size=0.9]-align[size=0.9]: center[size=0.9];
overflow[size=0.9]: hidden[size=0.9];
font[size=0.9]-family[size=0.9]: [size=0.9]'Microsoft yahei'[size=0.9];
position[size=0.9]: absolute[size=0.9];
top[size=0.9]: [size=0.9]50[size=0.9]%;
left[size=0.9]: [size=0.9]50[size=0.9]%;
margin[size=0.9]-top[size=0.9]: [size=0.9]-15px[size=0.9];
margin[size=0.9]-left[size=0.9]: [size=0.9]-250px[size=0.9];
[size=0.9]}
body [size=0.9]{
overflow[size=0.9]: hidden[size=0.9];
[size=0.9]}
[size=0.9]</style[size=0.9]>
[size=0.9]</head[size=0.9]>
[size=0.9]<body[size=0.9]>
[size=0.9]<div id[size=0.9]=[size=0.9]'progress'[size=0.9]>
[size=0.9]<p[size=0.9]>[size=0.9]0[size=0.9]%</p[size=0.9]>
[size=0.9]</div[size=0.9]>
[size=0.9]<script[size=0.9]>
[size=0.9]//js进度条代码
[size=0.9]var oP [size=0.9]= document.[size=0.9]getElementById[size=0.9]([size=0.9]'progress'[size=0.9]).[size=0.9]getElementsByTagName[size=0.9]([size=0.9]'p'[size=0.9])[size=0.9][[size=0.9]0[size=0.9]][size=0.9];
[size=0.9]var oCss [size=0.9]= document.[size=0.9]getElementById[size=0.9]([size=0.9]'css'[size=0.9])[size=0.9];
[size=0.9]function move[size=0.9](num[size=0.9]) [size=0.9]{
clearInterval[size=0.9](oP.[size=0.9]timer[size=0.9])[size=0.9];
oP.[size=0.9]timer [size=0.9]= setInterval[size=0.9]([size=0.9]function [size=0.9]([size=0.9]) [size=0.9]{
[size=0.9]if [size=0.9](parseInt[size=0.9](oP.[size=0.9]innerHTML[size=0.9]) [size=0.9]< num[size=0.9]) [size=0.9]{
[size=0.9]var s [size=0.9]= parseInt[size=0.9](oP.[size=0.9]innerHTML[size=0.9]) [size=0.9]+ [size=0.9]1[size=0.9];
[size=0.9]var w [size=0.9]= [size=0.9]500 [size=0.9]* s [size=0.9]/ [size=0.9]100[size=0.9];
oP.[size=0.9]innerHTML [size=0.9]= s [size=0.9]+ [size=0.9]'%'[size=0.9];
oP.[size=0.9]style.[size=0.9]width [size=0.9]= w [size=0.9]+ [size=0.9]'px'[size=0.9];
[size=0.9]} [size=0.9]else [size=0.9]{
clearInterval[size=0.9](oP.[size=0.9]timer[size=0.9])[size=0.9];
[size=0.9]if [size=0.9](num [size=0.9]== [size=0.9]100[size=0.9]) [size=0.9]{ [size=0.9]//js进度条代码等于100表示加载完成
oP.[size=0.9]parentNode.[size=0.9]parentNode.[size=0.9]removeChild[size=0.9](oP.[size=0.9]parentNode[size=0.9])[size=0.9];
oCss.[size=0.9]parentNode.[size=0.9]removeChild[size=0.9](oCss[size=0.9])[size=0.9];
[size=0.9]var oScript [size=0.9]= document.[size=0.9]getElementsByClassName[size=0.9]([size=0.9]'pMove'[size=0.9])[size=0.9];
[size=0.9]var length [size=0.9]= oScript.[size=0.9]length
[size=0.9]for [size=0.9]([size=0.9]var i [size=0.9]= length [size=0.9]- [size=0.9]1[size=0.9]; i [size=0.9]>= [size=0.9]0[size=0.9]; i[size=0.9]--[size=0.9]) [size=0.9]{
oScript[size=0.9][i[size=0.9]].[size=0.9]parentNode.[size=0.9]removeChild[size=0.9](oScript[size=0.9][i[size=0.9]][size=0.9])[size=0.9];
[size=0.9]}
[size=0.9]}
[size=0.9]}
[size=0.9]}[size=0.9], [size=0.9]10[size=0.9])[size=0.9];
[size=0.9]}[size=0.9];
[size=0.9]</script[size=0.9]>
[size=0.9]</body[size=0.9]>
[size=0.9]<script [size=0.9]class[size=0.9]=[size=0.9]'pMove'[size=0.9]>
move[size=0.9]([size=0.9]100[size=0.9])[size=0.9]; [size=0.9]//执行到body，表示js进度条已经加载完成，遮罩层退场
[size=0.9]</script[size=0.9]>
|
js进度条原理解析：
这里我们可以看到，进度条默认是0开始的，每走到一个地方，就会执行一个move函数，函数中有个数值，这个数值其实就是进度条走了多少了，我们可以去这样的分析，因为网站源代码是从上往下依次加载的，所以我们是不是就可以认为，让网页加载完成之后，页面加载进度就是100%了呢，我们在后面加上一个move(100)，正好就是执行完了，所以这个方法是非常巧妙的。 js进度条截取的图片如下：
| 
收藏
淘帖
踩
