在某項目中遇到excel導入時客戶要求顯示滾動條效果，在此基礎上使用js為其封裝了個進度條類，只需要簡單為其創建個div容器就可輕松實現效果，類具體如下：
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>Bootstrap 101 Template</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <!-- 進度條示例 --> <!-- <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <span class="proText"></span> </div> </div> --> <div id="contain"></div> <button onclick="refreshPro()">refresh</button> <button onclick="finish()">finish</button> <button onclick="remove()">remove</button> <script> var progressBar = null; function refreshPro() { var con = $("#contain"); progressBar = new ProgressBar(); progressBar.setContainer(con); progressBar.showProcessBar(); } function finish() { progressBar.finishProcessBar(); } function remove() { progressBar.destroyProcessBar(); } //如果在規定時間內都沒有完成進度條,則停留在90%地方,一旦完成立刻到100% //寫在ajax請求執行開始處進行創建,執行完成后執行完成進度條進度為100% //定義進度條類 //提供構建/展示/銷毀等工作 //container為要包含進入條展示容器 function ProgressBar($container) { var self = this; var container; if($container != null) { container = $container; } var interval; //創建的周期函數對象 var _id = "progress_bar" + new Date().getTime(); //progressBar隨機id編號 self.setContainer = function(_container) { container = _container; } //為當前容器加入progress self.createProgressBar = function() { container.append('<div class="progress" id="'+ _id +'"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><span class="proText"></span></div></div>'); } self.beginProcessBar = function() { var i = 0; interval = setInterval(function() { i += 10; if(i <= 90) { $("#" + _id + " .progress-bar").css({"width":i + "%"}); $("#" + _id + " .proText").text(i + '%'); } }, 1000); } self.showProcessBar = function() { self.createProgressBar(); self.beginProcessBar(); } self.finishProcessBar = function() { if(interval != null) { $("#" + _id + " .progress-bar").css({"width": "100%"}); $("#" + _id + " .proText").text('100%'); clearInterval(interval); } } self.destroyProcessBar = function() { $("#" + _id).remove(); } return self; } </script> </body></html>
新聞熱點
疑難解答
圖片精選
