首页 　· 　知识　· 　前端
用javascript实现进度条
孙钰佳的博客　　http://blog.csdn.net/sunyujia/archive/2008/06/15/2　　综合　　编辑:dezai　　图片来源:网络
>>html > <
  1.   
  2.   
  3.        
  4.   
  5.         进度条   
  6.   
  8.   
  9.         "text/css">   
  10.   
  11.             .bgBar{   
  12.   
  13.                 background: #FFFFFF;   
  14.   
  15.                 font-family: Arial,Verdana;   
  16.   
  17.                 border: 1px solid #000000;   
  18.   
  19.                 font-size: 17;   
  20.   
  21.                 font-weight: bold;   
  22.   
  23.             }   
  24.   
  25.             .bgBar div{   
  26.   
  27.                 background: #DAECC8;   
  28.   
  29.                 border: 1px solid #FFFFFF;   
  30.   
  31.                 color:  #308040;   
  32.   
  33.                 text-align: right;   
  34.   
  35.                 overflow: hidden;   
  36.   
  37.             }   
  38.   
  39.            
  40.   
  41.         "text/javascript">   
  42.   
  43.             /****************************************************************************************/  
  44.   
  45.             //下面代码为进度条的封装   
  46.   
  47.             if (syj == null) var syj = {};   
  48.   
  49.             //进度条,parent进度条的父控件对象,width进度条的宽度,barClass进度条的css,display是否显示进度条   
  50.   
  51.             syj.ProgressBar=function(parent, width , barClass, display) {   
  52.   
  53.                 this.parent=parent;   
  54.   
  55.                 this.pixels = width;   
  56.   
  57.                 this.parent.innerHTML="
    ";   
  58.   
  59.                 this.outerDIV = this.parent.childNodes[0];   
  60.   
  61.                 this.outerDIV.innerHTML="
    ";   
  62.   
  63.                 this.fillDIV = this.outerDIV.childNodes[0];   
  64.   
  65.                 this.fillDIV.innerHTML = "0";   
  66.   
  67.                 this.fillDIV.style.width = "0px";   
  68.   
  69.                 this.outerDIV.className = barClass;   
  70.   
  71.                 this.outerDIV.style.width = (width + 2) + "px";   
  72.   
  73.                 this.parent.style.display = display==false?'none':'';   
  74.   
  75.             }   
  76.   
  77.             //更新进度条进度 pct的值要介于0和1之间   
  78.   
  79.             syj.ProgressBar.prototype.setPercent = function(pct) {   
  80.   
  81.                 var fillPixels;   
  82.   
  83.                 if (pct < 1.0){   
  84.   
  85.                     fillPixels = Math.round(this.pixels * pct);   
  86.   
  87.                 }else {   
  88.   
  89.                     pct = 1.0;   
  90.   
  91.                     fillPixels = this.pixels;   
  92.   
  93.                 }   
  94.   
  95.                 this.fillDIV.innerHTML = Math.round(100 * pct) + "%";   
  96.   
  97.                 this.fillDIV.style.width = fillPixels + "px";   
  98.   
  99.             }   
  100.   
  101.             //控制进度条的 显示/隐藏   
  102.   
  103.             syj.ProgressBar.prototype.display= function(v){   
  104.   
  105.                 this.parent.style.display = v==true?'':'none';   
  106.   
  107.             }   
  108.   
  109.             //初始化进度条   
  110.   
  111.             function init(){   
  112.   
  113.                 window.jtProBar = new syj.ProgressBar(document.getElementById("progressBar"), 450 , "bgBar");   
  114.   
  115.             }   
  116.   
  117.             /****************************************************************************************/  
  118.   
  119.             //下面代码为演示程序   
  120.   
  121.             //开始演示   
  122.   
  123.             function startAutoDemo(){   
  124.   
  125.                 if(window.thread==null)   
  126.   
  127.                     window.thread=window.setInterval("updatePercent()",60);   
  128.   
  129.             }   
  130.   
  131.             //停止演示   
  132.   
  133.             function stopAutoDemo(){   
  134.   
  135.                 window.clearInterval(window.thread);   
  136.   
  137.                 window.thread=null;   
  138.   
  139.             }   
  140.   
  141.             //演示程序   
  142.   
  143.             function updatePercent(){   
  144.   
  145.                 if(window.count==null)window.count=0;   
  146.   
  147.                 window.count=count%100   
  148.   
  149.                 jtProBar.setPercent(window.count/100);   
  150.   
  151.                 window.count++;   
  152.   
  153.             }   
  154.   
  155.             /****************************************************************************************/  
  156.   
  157.            
  158.   
  159.        
  160.   
  161.     "init()">   
  162.   
  163.         "button" value="100%效果" onclick="window.stop=false;jtProBar.setPercent(1);"/>   
  164.   
  165.         "button" value="开始自动演示" onclick="startAutoDemo()"/>   
  166.   
  167.         "button" value="停止自动演示" onclick="stopAutoDemo()"/>   
  168.   
  169.         "button" value="显示" onclick="jtProBar.display(true)"/>   
  170.   
  171.         "button" value="隐藏" onclick="jtProBar.display(false)"/>   
  172.   
  173.            
  174.   
  175.         "progressBar">
  
  •   
  •        
  •   
  •   
    • 本文作者:孙钰佳的博客 来源:http://blog.csdn.net/sunyujia/archive/2008/06/15/2
    CIO之家 www.ciozj.com 微信公众号:imciow
    　　　　>>频道首页　　>>网站首页 　　纠错　　>>投诉
    版权声明:CIO之家尊重行业规范，每篇文章都注明有明确的作者和来源；CIO之家的原创文章，请转载时务必注明文章作者和来源；
    延伸阅读
    也许感兴趣的
    我们推荐的
    主题最新
    看看其它的
    上一篇
    仿网易多附件上传功能
    下一篇
    用javascript实现进度条
    作者其它的文章
    收藏至微信