javascript进度条,js进度条代码超简单

用javascript写的进度条，怎么获取进度条的值，按百分比显示出来？

s[0].style.width = 100 - r / i * 100 + "%";

成都创新互联公司专注于企业网络营销推广、网站重做改版、青山网站定制设计、自适应品牌网站建设、H5建站、购物商城网站建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为青山等各大城市提供网站开发制作服务。

该代码不就是设置进度条的么

如果你能更改页面你在标签中这样写：

h5(资料完整度span id="wz_jd"/span)/h5

然后在你的JS中

s[0].style.width = 100 - r / i * 100 + "%";

的下面写上:

document.getElementById("wz_jd").innerHTML = 100 - r / i * 100 + "%";

不就OK了么

注意:你的JS中哪儿有那行代码就在那行下面追加

如果不能更改页面就在那行代码下面这样写：

document.getElementsByTagName("h5")[0].innerHTML = "(资料完整度"+ (100 - r / i * 100) + "%)";

里面的0 表示是第1个h5标签如果你有多个自己进行更改

给你思路，定义一个块为进度条

然后设定背景图片，就是进度条位置

然后js控制图片位置增加，

style.backgroundPosition="10 0";

[img]

单进图条模式需要进度条长度为1000px的整数倍，

多进度条模式方法就多了，以两根进度条为例来表达的话可以第一根进度条表示1/100的精度，只要长度为100px的整数倍。第二个进度条的精度为1/10，长度需要为10px的整数倍。动画效果为第二根进度条满了第一根进度条进度加1就好了，这样组合起来就可以达到表示1/1000精度的效果。

当然，如果布局有限制直接将值表示在进度条上就行了，前端基本没有多少会刻意的要求动画精度吧。

其实所谓的进度条，你可以看成是连个div，比如

div id="div1"

div id="div2"/div

/div

然后给div1和div2定义一样的高度，div1的背景色设置成宽度100%，div2的宽度分成五分，每份20%，div1的宽度初始状态是0，当你完成一份的时候的时候宽度改为20%，背景色设置为比div1稍微深一些的颜色，没当完成一份就增加20%的宽度（js控制宽度），这样就完成了进度条功能

本文标题：javascript进度条,js进度条代码超简单
转载来于：http://6mz.cn/article/dsohojd.html