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()方法暫停進度條的自動更新。
以上代碼只是一個簡單的實現,您可以根據自己的需求添加更多的功能。希望本文可以對您有所幫助。