利用jquery和BootStrap实现动态滚动条效果

更新时间：2020-08-07 12:00:01 作者：startmvc

在某项目中遇到excel导入时客户要求显示滚动条效果，在此基础上使用js为其封装了个进度

在某项目中遇到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>

总结

以上所述是小编给大家介绍的利用jquery和BootStrap实现动态滚动条效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！