进度条

最新推荐文章于 2025-05-24 15:24:14 发布

dianmanzong3576

最新推荐文章于 2025-05-24 15:24:14 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lijinzhu7929/p/6627889.html

版权

 1    <style type="text/css">   
 2   
 3              .bgBar{   
 4   
 5                  background: #FFFFFF;   
 6   
 7                  font-family: Arial,Verdana;   
 8 
 9                  font-size: 17;   
10   
11                  font-weight: bold;   
12   
13              }   
14   
15              .bgBar div{   
16   
17                  background: #DAECC8;   
18   
19                  border: 1px solid #FFFFFF;   
20   
21                  color:   #308040;   
22   
23                  text-align: right;   
24   
25                overflow: hidden;   
26   
27              }   
28   
29          </style>

View Code

 1   <script type="text/javascript">   
 2   
 3             /****************************************************************************************/  
 4   
 5             //下面代码为进度条的封装   
 6   
 7             if (syj == null) var syj = {};   
 8   
 9             //进度条,parent进度条的父控件对象,width进度条的宽度,barClass进度条的css,display是否显示进度条   
10   
11              syj.ProgressBar=function(parent, width , barClass, display) {   
12   
13                 this.parent=parent;   
14   
15                 this.pixels = width;   
16   
17        this.parent.innerHTML="<div/>";   
18   
19                 this.outerDIV = this.parent.childNodes[0];   
20   
21                 this.outerDIV.innerHTML="<div/>";   
22   
23                 this.fillDIV = this.outerDIV.childNodes[0];   
24   
25                 this.fillDIV.innerHTML = "0";   
26    this.fillDIV.style.width = "0px";   
27   
28                 this.outerDIV.className = barClass;   
29   
30                 this.outerDIV.style.width = (width + 2) + "px";   
31   
32                 this.parent.style.display = display==false?'none':'';   
33   
34              }   
35  //更新进度条进度 pct的值要介于0和1之间   
36              syj.ProgressBar.prototype.setPercent = function(pct) {    
37                 var fillPixels;   
38                 if (pct < 1.0){   
39                      fillPixels = Math.round(this.pixels * pct);   
40                 }else {   
41                      pct = 1.0;   
42                      fillPixels = this.pixels;   
43                 }     
44                 this.fillDIV.innerHTML = Math.round(100 * pct) + "%";     
45                 this.fillDIV.style.width = fillPixels + "px";    
46              }   
47   
48             //控制进度条的 显示/隐藏   
49   
50              syj.ProgressBar.prototype.display= function(v){   
51   
52                 this.parent.style.display = v==true?'':'none';   
53   
54              }   
55   
56             //初始化进度条   
57   
58             function init(){   
59   
60                  window.jtProBar = new syj.ProgressBar(document.getElementById("progressBar"), 600 , "bgBar");   
61   
62              }   
63   
64 
65             //下面代码为演示程序   
66             //开始演示    
67             function startAutoDemo(){   
68    if(window.thread==null)   
69                      window.thread=window.setInterval("updatePercent()",60);     
70             }     
71             //停止演示   
72             function stopAutoDemo(){    
73                  window.clearInterval(window.thread);    
74                  window.thread=null;  
75             }    
76             //演示程序   
77             function updatePercent(){   
78                 if(window.count==null)window.count=0;    
79                  window.count=count%100     
80                  jtProBar.setPercent(window.count/100);    
81                  window.count++;   
82             }   
83          </script>

View Code

1 <body onload="init()">   
2          <input type="button" value="100%效果" onclick="window.stop=false;jtProBar.setPercent(1);"/>   
3          <input type="button" value="开始自动演示" onclick="startAutoDemo()"/>   
4          <input type="button" value="停止自动演示" onclick="stopAutoDemo()"/>     
5          <input type="button" value="显示" onclick="jtProBar.display(true)"/>   
6          <input type="button" value="隐藏" onclick="jtProBar.display(false)"/>    
7          <!-- 进度条的父控件 -->    
8           <div id="progressBar"></div>    
9      </body>