前端js實現動態更新進度條（重要）

時間 2019-12-19

原文原文鏈接

<html>
     <head>

         <title>進度條</title>
         <style type="text/css">

             .bgBar{

                 background: #FFFFFF;

                 font-family: Arial,Verdana;

                 border: 1px solid #000000;

                 font-size: 17;

                 font-weight: bold;

             }

             .bgBar div{

                 background: #DAECC8;

                 border: 1px solid #FFFFFF;

                 color:   #308040;

                 text-align: right;

                 overflow: hidden;

             }

         </style>

         <script type="text/javascript">

            /****************************************************************************************/

            //下面代碼爲進度條的封裝

            if (syj == null) var syj = {};

            //進度條,parent進度條的父控件對象,width進度條的寬度,barClass進度條的css,display是否顯示進度條

             syj.ProgressBar=function(parent, width , barClass, display) {

                this.parent=parent;

                this.pixels = width;

                this.parent.innerHTML="<div/>";

                this.outerDIV = this.parent.childNodes[0];

                this.outerDIV.innerHTML="<div/>";

                this.fillDIV = this.outerDIV.childNodes[0];

                this.fillDIV.innerHTML = "0";

                this.fillDIV.style.width = "0px";

                this.outerDIV.className = barClass;

                this.outerDIV.style.width = (width + 2) + "px";

                this.parent.style.display = display==false?'none':'';

             }

            //更新進度條進度 pct的值要介於0和1之間

             syj.ProgressBar.prototype.setPercent = function(pct) {

                var fillPixels;

                if (pct < 1.0){

                     fillPixels = Math.round(this.pixels * pct);

                 }else {

                     pct = 1.0;

                     fillPixels = this.pixels;

                 }

                this.fillDIV.innerHTML = Math.round(100 * pct) + "%";

                this.fillDIV.style.width = fillPixels + "px";

             }

            //控制進度條的顯示/隱藏

             syj.ProgressBar.prototype.display= function(v){

                this.parent.style.display = v==true?'':'none';

             }

            //初始化進度條

            function init(){

                 window.jtProBar = new syj.ProgressBar(document.getElementById("progressBar"), 600 , "bgBar");

             }

            /****************************************************************************************/

            //下面代碼爲演示程序

            //開始演示

            function startAutoDemo(){

                if(window.thread==null)
                     window.thread=window.setInterval("updatePercent()",60);

             }

            //中止演示

            function stopAutoDemo(){

                 window.clearInterval(window.thread);
                 window.thread=null;  javascript

}

            //演示程序

            function updatePercent(){

                if(window.count==null)window.count=0;

                 window.count=count%100

                 jtProBar.setPercent(window.count/100);

                 window.count++;

             }

            /****************************************************************************************/

         </script>

     </head>

     <body onload="init()">

         <input type="button" value="100%效果" onclick="window.stop=false;jtProBar.setPercent(1);"/>

         <input type="button" value="開始自動演示" onclick="startAutoDemo()"/>

         <input type="button" value="中止自動演示" onclick="stopAutoDemo()"/>

         <input type="button" value="顯示" onclick="jtProBar.display(true)"/>

         <input type="button" value="隱藏" onclick="jtProBar.display(false)"/>

         

         <div id="progressBar"></div>

     </body>

</html>css