부트 스트랩 진행률 막대 업데이트 상태 텍스트가 25 %, 50 %, 75 %, 100 %로 완료되었습니다.

텍스트가 "초기화 중"인 부트 스트랩 진행률 표시 줄이 있습니다. 너비가 25 %에 도달하면 "1 단계 완료"텍스트를 업데이트하고 싶습니다. 그런 다음 50 %에 도달하면 "2 단계 완료"등 ...부트 스트랩 진행률 막대 업데이트 상태 텍스트가 25 %, 50 %, 75 %, 100 %로 완료되었습니다.

이 작업을 수행하는 방법이 내장되어 있습니까? 그렇지 않다면 어떤 아이디어라도 감사 할 것입니다.

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 : 나는 또한 완벽한 비율을 표시하는 카운터 역할을하고 싶은 "진보 가치"요소가 .

출처

2017-02-23 Scott B

당신은 니펫에게이 항아리

검사처럼이 도움이

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>

희망 뭔가를 할 수있다!

출처

2017-02-23 17:32:37 neophyte

은 수정이 샘플 프로그램 자체

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

출처

2017-02-23 17:34:43

부트 스트랩 진행률 막대 업데이트 상태 텍스트가 25 %, 50 %, 75 %, 100 %로 완료되었습니다.

답변

관련 문제