jquery实现的一个简单进度条效果实例

jquery实现一个进度条的效果，或许在这里没有什么实际的作用，但是已经实现了进度条的部分原理，前端是怎么实现那种进度效果的。效果演示

进度条实现源码：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejquery实现进度条/title样式。进度条{ width :200 px高度：8像素边界：1像素固体# 98 AFB 7 border-radius :5 px；页边距-top :10 px；} # bar { width :0 pxh arth :8 pxborder-radius :5 px；背景# 5EC4EA}/style脚本类型=' text/jscript ' src=' http : jquery。量滴js '/script脚本类型=' text/JavaScript '函数进度条(){//初始化射流研究…进度条$('#bar ').css('width '，' 0px ')；//进度条的速度，越小越快变化速度=20;bar=setInterval(function(){ nowWidth=parsent($(' # bar '))).width())；//宽度要不能大于进度条的总宽度if(nowWidth=200){ barWidth=(nowWidth 1)' px '；$('#bar ').css('width '，BarWidth)；}else{//进度条读满后，停止clearInterval(条形);}},速度);}/script/head dyinput type=' button ' value='开始onclick='进度条()'/div class='进度条' div id=' bar '/div/div/body/html