js进度条源码下载—js进度条代码

八卦谈佚名 ▪ 2024-01-25 18:37:24

现在很多网站会用到进入网站特效，到网页没有加载完成的时候，会有一个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进度条截取的图片如下：

更多Python学习资料可关注:itheimaGZ获取