jquery 进度条
jQuery 进度条实现方法
使用 jQuery 可以轻松创建动态进度条，以下是几种常见的实现方式：
使用 HTML5 <progress> 元素配合 jQuery
HTML5 提供了原生进度条元素，可以通过 jQuery 控制其值：
<progress id="myProgress" value="0" max="100"></progress>
<button id="updateBtn">更新进度</button>$('#updateBtn').click(function() {
var currentValue = $('#myProgress').val();
if(currentValue < 100) {
$('#myProgress').val(currentValue + 10);
}
});使用 DIV 模拟进度条
更灵活的方式是用 DIV 元素创建自定义进度条：
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<button id="startProgress">开始</button>.progress-container {
width: 100%;
height: 20px;
background: #f0f0f0;
}
.progress-bar {
height: 100%;
width: 0%;
background: #4CAF50;
transition: width 0.3s;
}$('#startProgress').click(function() {
var width = 0;
var interval = setInterval(function() {
if(width >= 100) {
clearInterval(interval);
} else {
width++;
$('.progress-bar').css('width', width + '%');
}
}, 50);
});使用 jQuery UI 进度条
jQuery UI 提供了专门的进度条组件：
<div id="progressbar"></div>
<button id="uiProgressBtn">开始</button>$("#progressbar").progressbar({ value: 0 });
$("#uiProgressBtn").click(function() {
var currentValue = $("#progressbar").progressbar("value");
var interval = setInterval(function() {
currentValue += 1;
$("#progressbar").progressbar("value", currentValue);
if(currentValue >= 100) clearInterval(interval);
}, 50);
});动画效果增强
为进度条添加平滑动画效果：
$('.progress-bar').animate({
width: '100%'
}, {
duration: 2000,
step: function(now) {
$(this).text(Math.round(now) + '%');
}
});注意事项
- 进度更新应考虑使用 requestAnimationFrame 而非 setInterval 以获得更流畅的动画
- 对于长时间运行的任务，建议使用 Web Workers 避免界面冻结
- 移动端应用需注意触摸事件的兼容性处理
