js進度條源碼下載—js進度條代碼

時間  2019-11-15
標籤 進度 源碼 下載 代碼 欄目 JavaScript 简体版
原文   原文鏈接

 

如今不少網站會用到進入網站特效，到網頁沒有加載完成的時候，會有一個loding特效，加載完了以後才能看到頁面，今天就帶着作一個js進度條效果，今天要作的效果是純js進度條加載，沒有用到框架，方便你們進行深刻理解：javascript

首先咱們要進行js進度條的佈局

js進度條佈局以下：css

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執行是有前後的順序的，這裏你們必定要注意才行java

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進度條截取的圖片以下：

js進度條源碼下載

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程