欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-10-13 17:13:09
在某项目中遇到excel导入时客户要求显示滚动条效果，在此基础上使用js为其封装了个进度条类，只需要简单为其创建个div容器就可轻松实现效果，类具体如下： &...

在某项目中遇到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实现动态滚动条效果，希望对大家有所帮助

上一篇： 液晶显示器发热怎么办 液晶显示器发热的解决方法

下一篇： 揭秘中国古代青楼文化，风流但不下流

推荐阅读