我有一个带有文本"初始化"的bootstrap进度栏。当宽度达到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：我也有一个"进度值"元素，我想用作显示完整百分比的计数器。
请参阅此示例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>免责声明从匿名用户修改工作
您可以做这样的事情 -
检查摘要
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>希望这会有所帮助！