Question

我有一个引导进度条，其中包含文本＆＃34;正在初始化＆＃34;。我希望在宽度达到25％时更新该文本到第3阶段完成＆＃34;。然后当它达到50％时，＆＃34;阶段2完成＆＃34;等等......

是否有内置的方法来实现这一目标？如果没有，任何想法都会受到赞赏。

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：我还有一个＆＃34;进步值＆＃34;我希望用作显示完成百分比的计数器的元素。

Answer 1

你可以做这样的事情 -

检查摘录

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>

希望这有帮助！

Answer 2

参见此示例程序

$(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

Bootstrap进度条更新状态文本每隔一段时间完成25％，50％，75％，100％

2 个答案: