Bootstrap 进度条更新状态文本的间隔完成 25%、50%、75%、100%答案

【问题标题】：Bootstrap progress bar update status text at intervals completed 25%, 50%, 75%,100%Bootstrap 进度条更新状态文本的间隔完成 25%、50%、75%、100%
【发布时间】：2017-02-23 17:09:09
【问题描述】：

我有一个带有文本“正在初始化”的引导进度条。我想在宽度达到 25% 时将该文本更新为“第 1 阶段完成”。然后当达到 50% 时，“第 2 阶段完成”等...

是否有内置方法来完成此操作？如果没有，任何想法表示赞赏。

HTML

<div class="progress skill-bar">
  <div class="progress-bar progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
   <span class="progress-status">Initializing</span>
   <span id="progress-value" class="pull-right">0%</span>
  </div>
</div>

脚本：

$(document).ready(function () {
        $('#validator-click').on('click', function () {
            $('.progress .progress-bar').css("width",
              function () {
                 // var progress_value = $(this).css("width");
                 // $('.progress .progress-bar #progress-value').text(progress_value+'%');
                  return $(this).attr("aria-valuenow") + "%";
              }); 
            });
        });

PS：我还有一个“进度值”元素，我想将其用作显示完成百分比的计数器。

【问题讨论】：

标签： javascript jquery twitter-bootstrap progress-bar

【解决方案1】：

查看此示例程序

$(function() {
  var timerId = 0;
  var ctr = 0;
  var max = 5;

  timerId = setInterval(function() {
    // interval function
    ctr++;
    $('#blips > .progress-bar').attr("style", "width:" + ctr * max + "%");
    
    $('#procress').html(ctr * max + "%");
    if(ctr * max == 30){
        $('#status').html("Stage 1 Complete")
      }
     if(ctr * max == 50){
        $('#status').html("Stage 2 Complete")
      }
     if(ctr * max == 75){
        $('#status').html("Stage 3 Complete")
      }
    if(ctr * max == 100){
        $('#status').html("Stage 4 Complete")
      }
    // max reached?
    //alert(max)
    if (ctr == 4*max) {
      clearInterval(timerId);
    }

  }, 500);


  $('.btn-default').click(function() {
    clearInterval(timerId);
  });

});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<body>

  <div class="container">
    <hr>
    <div class="progress" id="blips">
      <div class="progress-bar" role="progressbar">
        <span class="sr-only"></span>
      </div>
    </div>
    <hr>
    <p id="procress"></p>
    <p id="status"></p>
    <hr>
    <button class="btn btn-default">Stop</button>
  </div>
</body>

免责声明修改Work from anonymous user

【讨论】：

【解决方案2】：

你可以这样做——

检查sn-p

status = 1;
$(document).ready(function () {
        $('#change').on('click', function () {
          

//Note the lowercase first letter.


if(status==1) {
    var progress_val = 25;
          $('#prog').css('width', progress_val+'%').attr('aria-valuenow', progress_val);
          $('#stage').html('1 stage completed');
          $('.progress-status').css('display', 'none');
          $('#progress-value').text('25%');
    status = 2;
}
else if(status==2) {
    var progress_val = 50;
          $('#prog').css('width', progress_val+'%').attr('aria-valuenow', progress_val);
          $('#stage').html('2 stage completed');
           $('#progress-value').html('50%');
    status = 3;
}
else if(status==3) {
    var progress_val = 75;
          $('#prog').css('width', progress_val+'%').attr('aria-valuenow', progress_val);
          $('#stage').html('3 stage completed');
           $('#progress-value').html('75%');
    status = 4;
}
else if(status==4) {
    var progress_val = 100;
          $('#prog').css('width', progress_val+'%').attr('aria-valuenow', progress_val);
          $('#stage').html('4 stage completed');
           $('#progress-value').html('100%');
}
          
            });
        });

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
            
           </style>
           </head>
           <body>
          <div class="progress skill-bar">
  <div id = "prog" class="progress-bar progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
   <span class="progress-status">Initializing</span>
   <span id="progress-value" class="pull-right">0%</span>
  </div>
</div>
<p id="stage">0 stage completed</p>
<button id="change" class="btn btn-lg">progress</button>
<script>

</script>
  </body>
  </html>

希望这会有所帮助！

【讨论】：