Bootstrap进度条更新状态文本的完成时间间隔为25％，50％，75％，100％ [英] Bootstrap progress bar update status text at intervals completed 25%, 50%, 75%,100%
本文介绍了Bootstrap进度条更新状态文本的完成时间间隔为25％，50％，75％，100％的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有文本正在初始化"的引导进度栏.我想在宽度达到25％到阶段1完成"时更新该文本.然后当达到50％时，第2阶段完成"，等等...
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.
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:我也有一个"progress-value"元素，我想作为一个计数器来显示完成百分比.
PS: I also have a "progress-value" element that I'd like to serve as a counter to display the percent complete.
推荐答案
您可以执行以下操作-
检查代码段
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>
希望这会有所帮助！
这篇关于Bootstrap进度条更新状态文本的完成时间间隔为25％，50％，75％，100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
