如何用js实现进度条效果呢？
这里介绍下js进度条的实现方法，网上流传最多的进度条实现，是采用如下二种方法
一个是用flash实现的；
一个是用动态的gif实现的。
本节我们重点是用 css+js实现进度条效果。
1，html部分
<div id="loading">
<strong id="loadcss"> 33%</strong>
</div>
2，css样式代码
#loading {
width: 300px;
background-color: #000;
border : 2px solid #000;
}
望进度条的底色是 #000 ,黑色的,再加了一个边框。
接下来多 loadcss 进行设计。
#loadcss {
display : block ; /*很重要, 弄成块*/
background-color: # 0df;
text-align : center;
}
注意,这里的block 很重要的，用 #0df 这种颜色来作为进度条的颜色;
不过现在是整条进度条都是满的，怎么弄可以显示进度呢?
这里有一个技巧，代码：
<div id="loading">
<strong id="loadcss" style="width:33%;"> 33%</strong>
</div>
显示的就是33% 了
但是,他是不动,对吧? 好,下面就用 js 来实现.
<script language="
javascript">
i=0;
function load () {
showload=setinterval("load()",500);
}
function setload(){
i+=5;
if (i>=100) {
clearinterval(showlaod);
}
document.getelementbyid("loadcss").style.width=i+"%" ;
document.getelementbyid("loadcss").innerhtml=i+"%";
}
</script>
这段js主要是两个函数, 一个是 load ,用来开启进度条,
第二是 setload ,用来 控制进度条 的位置 ,在 setload设置一个计数器,每0.5秒运行一次steload.
这段js要放在head里面,然后在body中调用 , 即 <body onload="load;">。
以上介绍了css+js进度条的实现方法，以及遇到的问题，希望对大家有所帮助。
