前端js实现动态更新进度条-7

时间 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