用jQuery实现的最简单的进度条，只有不到10行代码。样式可以直接忽略。（有一个图片需要自己找一下）
[CSS]代码 代码如下:$(function(){ var i=0; (function progressBar(){ i=i+1; if(i>=101){ i=0; } $(“#proc”).animate({width:i+”%”},500); $(“#progressWord”).text(i+”%”); setTimeout(progressBar,1500); })();});
[CSS]代码 代码如下: .progress_out{ posi
在本文中，我们将深入探讨如何使用jQuery来创建一个简单的进度条示例，这个示例仅包含不到10行代码。进度条是用户界面中常见的一种元素，它用于表示任务的完成进度，通常与数据加载、视频播放或任何需要时间的过程关联。
我们需要了解这个例子的结构。该示例主要由三部分组成：HTML结构、CSS样式和jQuery脚本。让我们逐一分析这些部分：
**HTML结构**
HTML部分定义了进度条的基本布局。这里有一个`<div>`元素，带有ID "outDiv"，并应用了"progress_out"类。这个外层容器将作为进度条的背景。内部还有一个`<div>`元素，ID为"progressbar"，并应用了"progress_inner"类，表示实际的进度条填充部分。还有一个显示百分比的文本元素，ID为"progressWord"。
```html
<div id="outDiv" class="progress_out">
<div id="progressbar" class="progress_inner">
<img id="proc" src="/cdr/images/resource/processBar.png" width=0 height=40px />
</div>
<div id="progressWord" class="progress_word">0%</div>
</div>
```
**CSS样式**
CSS代码用于设置进度条的外观。`.progress_out`类定义了进度条的边框、阴影和宽度。`.progress_inner`类设置了填充颜色和高度。`.progress_word`类用于定位和设置百分比文本的样式。在这个例子中，我们没有看到完整的CSS代码，但可以推断出，它会包含类似以下的规则：
```css
.progress_out {
position: relative;
border: 1px solid #3c4d60;
-webkit-box-shadow: #666 0px 0px 3px;
-moz-box-shadow: #666 0px 0px 3px;
box-shadow: #666 0px 0px 3px;
width: 200px;
height: 40px;
}
.progress_inner {
background-color: #DADAE4;
width: 100%;
height: 40px;
}
.progress_word {
position: absolute;
left: 50%;
top: 24%;
font-weight: bold;
}
```
**jQuery脚本**
jQuery部分负责动态更新进度条的宽度和文本。这里使用了一个立即执行的匿名函数（IIFE），其中包含了一个名为`progressBar`的递归函数。这个函数首先将变量`i`加1，然后检查`i`是否超过101。如果超过，则重置为0。接着，它使用`animate`方法改变`#proc`元素的宽度（即进度条的填充部分）和`#progressWord`元素的文本，表示当前进度。`setTimeout`函数用于每1.5秒调用一次`progressBar`函数，以模拟进度的动态更新。
```javascript
$(function() {
var i = 0;
(function progressBar() {
i = i + 1;
if (i >= 101) {
i = 0;
}
$("#proc").animate({ width: i + "%" }, 500);
$("#progressWord").text(i + "%");
setTimeout(progressBar, 1500);
})();
});
```
总结一下，这个简单的jQuery进度条示例通过结合HTML结构、CSS样式和少量的JavaScript代码，实现了进度条的动态显示。在实际项目中，你可以根据需求调整样式、动画速度和递归函数的逻辑，以适应各种应用场景。这个例子展示了jQuery在实现动态效果时的强大功能，即使在代码量极小的情况下也能提供丰富的用户体验。
