黄国瑞博客

首页 > Javascript资源 > js进度条实现方法详解

js进度条实现方法详解

现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架,方便大家进行深入理解:

首先我们要进行js进度条的布局

js进度条布局如下:

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
</script>
<style type="text/css" id='css'>
    #progress {
        position: fixed;
        background: #000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
    }

    #progress p {
        width: 0px;
        height: 30px;
        border-radius: 3px;
        background: #ffcccc;
        color: #330000;
        font-size: 14px;
        font-weight: bold;
        line-height: 30px;
        text-align: center;
        overflow: hidden;
        font-family: 'Microsoft yahei';
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -250px;
    }

    body {
        overflow: hidden;
    }
</style>
</head>

<body>

    <div id='progress'>
        <p>0%</p>
    </div>
</body>

写完了之后,就要开始写js进度条加载的js代码了,代码如下:

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
    var oP = document.getElementById('progress').getElementsByTagName('p')[0];
    var oCss = document.getElementById('css');

    function move(num) {
        clearInterval(oP.timer);
        oP.timer = setInterval(function () {
            if (parseInt(oP.innerHTML) < num) {
                var s = parseInt(oP.innerHTML) + 1;
                var w = 500 * s / 100;
                oP.innerHTML = s + '%';
                oP.style.width = w + 'px';
            } else {
                clearInterval(oP.timer);
                if (num == 100) {
                    oP.parentNode.parentNode.removeChild(oP.parentNode);
                    oCss.parentNode.removeChild(oCss);
                    var oScript = document.getElementsByClassName('pMove');
                    var length = oScript.length
                    for (var i = length - 1; i >= 0; i--) {
                        oScript[i].parentNode.removeChild(oScript[i]);
                    }
                }
            }
        }, 10);
    };
</script>

因为考虑到js执行是有先后的顺序的,这里大家一定要注意才行

js进度条全部源码展示:

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
<style type="text/css" id='css'>
    #progress {
        position: fixed;
        background: #000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
    }

    #progress p {
        width: 0px;
        height: 30px;
        border-radius: 3px;
        background: #ffcccc;
        color: #330000;
        font-size: 14px;
        font-weight: bold;
        line-height: 30px;
        text-align: center;
        overflow: hidden;
        font-family: 'Microsoft yahei';
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -250px;
    }

    body {
        overflow: hidden;
    }
</style>
</head>

<body>

    <div id='progress'>
        <p>0%</p>
    </div>

    <script>
//js进度条代码
        var oP = document.getElementById('progress').getElementsByTagName('p')[0];
        var oCss = document.getElementById('css');

        function move(num) {
            clearInterval(oP.timer);
            oP.timer = setInterval(function () {
                if (parseInt(oP.innerHTML) < num) {
                    var s = parseInt(oP.innerHTML) + 1;
                    var w = 500 * s / 100;
                    oP.innerHTML = s + '%';
                    oP.style.width = w + 'px';
                } else {
                    clearInterval(oP.timer);
                    if (num == 100) { //js进度条代码等于100表示加载完成
                        oP.parentNode.parentNode.removeChild(oP.parentNode);
                        oCss.parentNode.removeChild(oCss);
                        var oScript = document.getElementsByClassName('pMove');
                        var length = oScript.length
                        for (var i = length - 1; i >= 0; i--) {
                            oScript[i].parentNode.removeChild(oScript[i]);
                        }
                    }
                }
            }, 10);
        };
    </script>
</body>

<script class='pMove'>
    move(100); //执行到body,表示js进度条已经加载完成,遮罩层退场
</script>

js进度条原理解析:
这里我们可以看到,进度条默认是0开始的,每走到一个地方,就会执行一个move函数,函数中有个数值,这个数值其实就是进度条走了多少了,我们可以去这样的分析,因为网站源代码是从上往下依次加载的,所以我们是不是就可以认为,让网页加载完成之后,页面加载进度就是100%了呢,我们在后面加上一个move(100),正好就是执行完了,所以这个方法是非常巧妙的。

以上就是黄国瑞博客带来的《js进度条实现方法详解》,非常感谢您的观看!如果没有相关文字说明,本文即为黄国瑞博客原创(www.huangguorui.cn),欢迎读者转载并保留本站版权!

以上就是js进度条实现方法详解的详细内容,更多请持续关注本站其它相关文章!

标签:

浏览了该文章的用户还浏览了以下文章:

共有 3 条评论

  1. web前端开发 Windows NT | Chrome 75.0.3770.100

    嗯,这个制作js进度条代码的方法学习到了

  2. web前端开发 Windows NT | Chrome 75.0.3770.100

    请问还有没有别的方法去制作js进度条呢?

  3. web前端开发 Windows NT | Chrome 75.0.3770.100

    希望博主多多推出更多的好文章

本站是一个关注web前端发展和注重SEO优化的个人网站,提供最新的web前端资讯,专注web前端开发,分享各种所遇问题解决方法与个人心得,同时分享前端资源和工具等,并提供HTML5模板的下载,期待你的参与!

热门评论

友情链接

友链可以提升搜索引擎友好度,欢迎大家踊跃互添友链!仅限同行业【程序类网站】。有意向的小伙伴可以在网站注册账号给我留言!

Top

如有疑问,可联系我: