jQuery進度條暫停代碼可以幫助開發者掌握進度條的控制和操作,以便更好地用戶體驗和應用表現。
$(function(){ // 暫停按鈕點擊事件 $('#pauseBtn').click(function(){ clearInterval(progress); // 清除計時器 }); // 繼續按鈕點擊事件 $('#resumeBtn').click(function(){ progress = setInterval(function(){ var progressBarWidth = ($("#progressBar").width() / $("#progressBar").parent().width()) * 100; var newWidth = progressBarWidth + 2; $("#progressBar").width(newWidth + '%'); // 進度條完成 if(newWidth >= 100){ clearInterval(progress); } }, 1000); }); // 初始化 var progress = setInterval(function(){ var progressBarWidth = ($("#progressBar").width() / $("#progressBar").parent().width()) * 100; var newWidth = progressBarWidth + 2; $("#progressBar").width(newWidth + '%'); // 進度條完成 if(newWidth >= 100){ clearInterval(progress); } }, 1000); });
以上是一個簡單的jQuery進度條暫停代碼示例,通過點擊暫停按鈕可以停止進度條,再通過點擊繼續按鈕可以重新開始進度條。在初始化時,定義了一個計時器(setInterval),它每隔一定的時間就會執行一次匿名函數,來更新進度條的寬度,以達到進度條的增長的效果。當進度條的寬度達到100%時,計時器會停止執行,表示進度條完成。其中用到了jQuery語法和JavaScript的一些基本語法和操作。
上一篇css引用放什么位置
下一篇css彈性盒對齊方式