<!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"  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>
    <!-- 進(jìn)度條示例 -->
    <!-- <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();
      }
     
    //如果在規(guī)定時間內(nèi)都沒有完成進(jìn)度條,則停留在90%地方,一旦完成立刻到100%
    //寫在ajax請求執(zhí)行開始處進(jìn)行創(chuàng)建,執(zhí)行完成后執(zhí)行完成進(jìn)度條進(jìn)度為100%
    //定義進(jìn)度條類
    //提供構(gòu)建/展示/銷毀等工作
    //container為要包含進(jìn)入條展示容器
      function ProgressBar($container) {
        
        var self = this;
        
        var container;
        
        if($container != null) {
          container = $container;
        }
        
        var interval; //創(chuàng)建的周期函數(shù)對象
        var _id = "progress_bar" + new Date().getTime(); //progressBar隨機(jī)id編號
        
        self.setContainer = function(_container) {
          container = _container;
        }
        
        //為當(dāng)前容器加入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>

總結(jié)

以上所述是小編給大家介紹的利用jquery和BootStrap實現(xiàn)動態(tài)滾動條效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: