在某项目中遇到excel导入时客户要求显示滚动条效果，在此基础上使用js为其封装了个进度条类，只需要简单为其创建个div容器就可轻松实现效果，类具体如下：

<!DOCTYPE html>
<html lang=\"zh-CN\">
  <head>
    <  charset=\"utf-8\" />
    <  http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />
    <  name=\"viewport\" content=\"width=device-width,initial-scale=1\" />
    < >Bootstrap 101 Template</ >
    
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <  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\">
    
    <  src=\"https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js\"></ >
    
    <!-- 最新的 Bootstrap 核心   文件 -->
    <  src=\"https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js\" integrity=\"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\" crossorigin=\"anonymous\"></ >
  
  </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  =\"refreshPro()\">refresh</button>
    <button  =\"finish()\">finish</button>
    <button  =\"remove()\">remove</button>
    
    < >
      
      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;
      }
      
    </ >
  </body>
</html>

总结

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章