jQuery 進度條計算

進度條是網頁中常見的組件之一，它可以展示某個流程的進度，讓用戶了解當前處理進度，提高用戶體驗。在 jQuery 中，可以很容易地實現一個進度條。

<!-- HTML 結構 -->
<div id="progress"></div>
<!-- CSS 樣式 -->
#progress {
width: 0;
height: 10px;
background-color: #f00;
}
<!-- jQuery 代碼 -->
function calculateProgress() {
var total = 100;//總任務數
var current = 0;//已完成的任務數
//模擬任務完成
setInterval(function() {
if (current == total) {
clearInterval();
}
else {
current ++;
var progress = current / total * 100;
//設置進度條寬度
$('#progress').css('width', progress + '%');
}
}, 100);
}
calculateProgress();

上面的代碼以一個簡單的進度條為例，通過 setInterval() 實現模擬任務完成的效果，然后根據已完成的任務數和總任務數計算進度條的寬度，并通過 jQuery 的 css() 方法設置進度條的寬度，從而實現進度條的動態(tài)效果。

如果要實現更具備復雜性的進度條計算方式，可以結合其他技術框架如 Bootstrap 進行實現，從而創(chuàng)建更為精美的進度條效果。