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

最新推荐文章于 2024-09-28 06:06:25 发布

zhaosx1234567

最新推荐文章于 2024-09-28 06:06:25 发布

阅读量3.1k

点赞数 1

分类专栏： javascript bootstrap Progress bar

本文链接：https://blog.csdn.net/zhaosx1234567/article/details/84446763

版权

javascript 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

bootstrap

1 篇文章 0 订阅

订阅专栏

Progress bar

1 篇文章 0 订阅

订阅专栏

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

       
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

       <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

       
       <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 id="contain"></div>

       <button οnclick="refreshPro()">refresh</button>
       <button οnclick="finish()">finish</button>
       <button οnclick="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>