Bootstrap progress bar update status text at inter

2019-09-12 17:21发布

站内问答 / JavaScript
1942 2 6

I have a bootstrap progress bar that has text "Initializing". I would like to update that text when the width reaches 25% to "Stage 1 Complete". Then when it reaches 50%, "Stage 2 Complete", etc...

Are there built in methods to accomplish this? If not, any ideas appreciated.

The 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>

The script:

$(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: I also have a "progress-value" element that I'd like to serve as a counter to display the percent complete.

2条回答
虎瘦雄心在
2楼-- · 2019-09-12 17:43

See this sample programe

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

Disclaimer modifying Work from anonymous user

查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
3楼-- · 2019-09-12 17:58

you can do something like this--

check the snippet

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>

Hope this helps!

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)