本文目录一览：
- 1、如何用js实现游戏倒计时进度条效果
- 2、怎么编程javascript进度条
- 3、JS做的进度条，如何做的？
- 4、JS实现点击提交表单后，出现一个进度条
- 5、js代码执行绑定进度条
- 6、如何用JavaScript打造0.1%精度的进度条？
如何用js实现游戏倒计时进度条效果
播放的进度条，可以用个div标签来做，计算整个音频的时间除以比值，js用setTimeout逐渐走div的背景色。
怎么编程javascript进度条
其实所谓的进度条，你可以看成是连个div，比如
div id="div1"
div id="div2"/div
/div
然后给div1和div2定义一样的高度，div1的背景色设置成宽度100%，div2的宽度分成五分，每份20%，div1的宽度初始状态是0，当你完成一份的时候的时候宽度改为20%，背景色设置为比div1稍微深一些的颜色，没当完成一份就增加20%的宽度（js控制宽度），这样就完成了进度条功能
JS做的进度条，如何做的？
js其实是没法计算到网页的加载进度的。
目前见到的打开页面显示进度的有两种
1、如果是flash做的，那是flash自身的加载进度。
2、如果是js做的，做法比较简单，就是在页面的不同的地方插入script标签，动态改变进度的值。
html
head
script
var processPer = 0;
window.onload = function(){
document.getElementById('process').innerHTML = processPer;
}
/script
/head
body
div id="process"/div
div/div
....
script
processPer = 30;
document.getElementById('process').innerHTML = processPer;
/script
div/div
....
div/div
....
script
processPer = 100;
document.getElementById('process').innerHTML = processPer;
/script
/body
/html
类似这样的，就可以实现了进度的动态改变。
JS实现点击提交表单后，出现一个进度条
简单的话，用JS模拟一个，用setTimeOut方法
form name=loading
P align=center /P
P align=center aaaaaaaaaaaaaaaaaaaaaa/P
P align=center /P
P align=centerFONT face=Arial color=#0066ff size=2已经完成：/FONT
INPUT style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bolder; PADDING-BOTTOM: 0px; COLOR: #0066ff; BORDER-TOP-style: none; PADDING-TOP: 0px; FONT-FAMILY: Arial; BORDER-RIGHT-style: none; BORDER-LEFT-style: none; BACKGROUND-COLOR: white; BORDER-BOTTOM-style: none" size=46 name=chart
BR
INPUT
style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; COLOR: #0066ff; BORDER-BOTTOM: medium none; TEXT-ALIGN: center"
size=47 name=percent
script
var bar=0
var line="||"
var amount="||"
count()
function count(){
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar99)
{setTimeout("count()",100);}
else
{window.location = "";}
}/SCRIPT
/P
/form
复杂的话，你还要考虑处理数据的时间问题
js代码执行绑定进度条
需要计算分析文件进度，转成百分比，动态变更progress-bar的width
div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"
60%
/div
如何用JavaScript打造0.1%精度的进度条？
单进图条模式需要进度条长度为1000px的整数倍，
多进度条模式方法就多了，以两根进度条为例来表达的话可以第一根进度条表示1/100的精度，只要长度为100px的整数倍。第二个进度条的精度为1/10，长度需要为10px的整数倍。动画效果为第二根进度条满了第一根进度条进度加1就好了，这样组合起来就可以达到表示1/1000精度的效果。
当然，如果布局有限制直接将值表示在进度条上就行了，前端基本没有多少会刻意的要求动画精度吧。
