jQuery是一個JavaScript庫，它大大簡化了Web開發中的許多重復和常見的任務，其中包括創建靜態進度條。靜態進度條是在Web應用程序中常見的UI元素，用于向用戶顯示任務的進度。
// 在HTML中創建靜態進度條
<div id="progressbar"></div>
// CSS樣式
#progressbar {
width: 300px;
height: 20px;
background-color: #eee;
border-radius: 5px;
margin: 20px;
position: relative;
}
#progressbar:after {
content: "";
display: block;
width: 0%;
height: 100%;
background-color: #428bca;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
}
// 使用jQuery更新進度條
var progress = 0;
var interval = setInterval(function() {
progress += 10;
if (progress >100) {
clearInterval(interval);
} else {
$('#progressbar:after').css('width', progress + '%');
}
}, 1000);上面的代碼中，我們創建了一個
元素作為進度條容器，并給它設定了一些基本樣式。然后，我們在容器上創建了一個偽類:after，它將呈現出進度條本身。這個偽類有一個width屬性，它的長度將根據我們在JavaScript中設置的進度值而變化。
在使用jQuery更新進度條時，我們使用setInterval()函數來1000毫秒(1秒)一次增加進度。我們還設置了一個progress變量來存儲當前的進度，用于計算它是否已經達到了100%。如果達到了100%，我們使用clearInterval()函數停止更新。
總的來說，通過使用jQuery，我們可以輕松地創建一個靜態進度條并動態更新它。
下一篇css 京東邊框效果