JQuery進度條是一個優秀的工具,可以用來展示特定操作的進度。在網頁中,經常需要使用進度條來展示程序的運行時間或者頁面元素的加載進度。下面是JQuery進度條的打開方法。
<!-- JQuery CDN --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- JQuery UI CDN --> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <!-- JQuery CSS --> <link rel="stylesheet" > <script type="text/javascript"> $(document).ready(function(){ // 綁定一個按鈕點擊事件 $('#btn').click(function(){ // 創建進度條 $('#progressbar').progressbar({ value: 0 }); // 設置進度條的進度 var progress = setInterval(function() { var val = $('#progressbar').progressbar('value') || 0; $('#progressbar').progressbar('value', val + 1); if (val == 99) { clearInterval(progress); } }, 80); }); }); </script>
以上代碼的解釋如下:
首先,我們需要引入JQuery和JQuery UI的CDN以及CSS。然后,在頁面加載完成后,我們通過一個按鈕的點擊事件來觸發進度條的創建和展示。創建進度條的方法非常簡單,只需要調用progressbar()并設置value為0即可。接著,在JS中使用setInterval()來實現進度條的動態展示。循環內部的代碼逐漸改變進度條的value值,并通過progressbar()實時更新頁面上的進度條。當進度達到99的時候,清除setInterval循環。
上面的代碼是一個基本的JQuery進度條,如果需要更加個性化的樣式,可以在CSS中根據自己的需求來進行調節。使用JQuery進度條來展示操作的進度,可以讓用戶更加直觀地感受到程序的運行狀態,也能夠讓網頁看起來更加專業和人性化。
下一篇css彈性布局自動換行