例子:进度条制作

Posted 带你疯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了例子:进度条制作相关的知识,希望对你有一定的参考价值。

<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:200px; height:10px; border:1px solid #60F;}
#nei{ width:0px; height:10px; background-color:#F33; float:left}
</style>

 

<div style="width:600px; height:300px; margin-top:30px">

     <div id="wai">      

      <div id="nei">                 

      </div>    

    </div>

  <input type="button" value="开始" onclick="Start()" />

</div>

 

<script type="text/javascript">

function Start()

{  

  Bian();

  }

  var bfb = 0; function Bian()

  {    

  //将百分比变化

   bfb= bfb+1;    

  //改变宽度  

  document.getElementById("nei").style.width = bfb+"%";  

   //判断  

  if(bfb<100)

   {   

  window.setTimeout("Bian()",50);  

  }  

}

</script>

以上是关于例子:进度条制作的主要内容,如果未能解决你的问题,请参考以下文章

iOS 制作个圆形进度条

VB怎么制作进度条?

前端页面加载进度条的制作

如何用纯CSS3制作进度条

如何制作WinForm中自定义进度条

如何用纯CSS3制作进度条