欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

jquery 進度條暫停

老白2年前8瀏覽0評論

JQuery進度條是一種非常常見的頁面效果,通過它可以讓用戶了解頁面正在加載的進度情況。而現在,越來越多的網站開始提供暫停功能,這給用戶帶來了更好的體驗。在下面的代碼中,我們將為您演示如何使用JQuery進度條暫停功能。

<script>
var progressTimer;
var progressBar = $( "#progress" );
function startProgress() {
//啟動進度條
let percent = 0;
progressBar.show();
progressTimer = setInterval(function() {
if (percent >= 100) {
clearInterval(progressTimer);
progressBar.hide();
} else {
percent += 1;
updateProgressBar(percent);
}
}, 50);
}
function pauseProgress() {
//暫停進度條
clearInterval(progressTimer);
progressBar.hide();
}
function updateProgressBar(percent) {
//更新進度條
progressBar.find(".progress-bar").css("width", percent + "%");
}
</script>
<div id="progress" class="progress" style="display:none">
<div class="progress-bar" style="width:0%;"></div>
</div>
<button onclick="startProgress()">開始</button>
<button onclick="pauseProgress()">暫停</button>

在以上代碼中,我們創建了一個名為progressBar的jquery對象,并使用了show(), hide()方法在需要的時候顯示和隱藏進度條。在startProgress()函數中,我們使用了setInterval()方法來模擬進度條的自動更新。而pauseProgress()函數則使用了clearInterval()方法暫停進度條的自動更新。

以上代碼只是一個簡單的實現,您可以根據自己的需求添加更多的功能。希望本文可以對您有所幫助。