在某项目中遇到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" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 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>
新闻热点
疑难解答
