在某項(xiàng)目中遇到excel導(dǎo)入時(shí)客戶要求顯示滾動(dòng)條效果，在此基礎(chǔ)上使用js為其封裝了個(gè)進(jìn)度條類，只需要簡(jiǎn)單為其創(chuàng)建個(gè)div容器就可輕松實(shí)現(xiàn)效果，類具體如下：
<!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> <!-- 進(jìn)度條示例 --> <!-- <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(); } //如果在規(guī)定時(shí)間內(nèi)都沒有完成進(jìn)度條,則停留在90%地方,一旦完成立刻到100% //寫在ajax請(qǐng)求執(zhí)行開始處進(jìn)行創(chuàng)建,執(zhí)行完成后執(zhí)行完成進(jìn)度條進(jìn)度為100% //定義進(jìn)度條類 //提供構(gòu)建/展示/銷毀等工作 //container為要包含進(jìn)入條展示容器 function ProgressBar($container) { var self = this; var container; if($container != null) { container = $container; } var interval; //創(chuàng)建的周期函數(shù)對(duì)象 var _id = "progress_bar" + new Date().getTime(); //progressBar隨機(jī)id編號(hào) self.setContainer = function(_container) { container = _container; } //為當(dāng)前容器加入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>總結(jié)
以上所述是小編給大家介紹的利用jquery和BootStrap實(shí)現(xiàn)動(dòng)態(tài)滾動(dòng)條效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
