进度条文本 [英] Progress Bar text
本文介绍了进度条文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我有一个很棒的进度吧感谢你们中的一些人在stackoverflow上。我的问题是如何获取文本来告诉进度条的百分比并使用进度条移动（如果条形图的绿色部分为50％我希望文本处于25％等等...即始终在中间进度）
感谢！
$ b $ p < jsdata-hide =falsedata-console =truedata-babel =false>
<！DOCTYPE html>< html>< head> < title>信息安全评估< / title> < link rel =stylesheettype =text / csshref =AuditScriptAssesmentToolTest.css> < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script> < link href =https://fonts.googleapis.com/icon?family=Material+Icons =stylesheet> < link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css> < script src =〜/ Scripts / jquery-1.12.4.min.js>< / script> <！ - ********************************************* *************************** - > <！ - ********************************************* ************************************************** *************** - > ; < div id =head> <峰; br> < div id =myProgress> < progress id ='progressBar'max ='100'value ='0'style =background-color：red; font-family：Impact，Charcoal，sans-serif; >< strong> 0％< / strong>< / progress>< / div><！ - < div id =myProgress>< progress max =100><< ; div id =myBarstyle =font-family：Impact，Charcoal，sans-serif; ><强大于0％LT; /强>< / DIV> < / DIV> - > <峰; br> < / DIV>< /头><身体GT; <峰; br> < main class =mainarea> <峰; br> <峰; br> <！ - ********************************************* * 1111111111111111111111111 ************************************************ ******** - > < div class =control1> < div id =criticalSecurityControlForms> < form action =/ action_page.php> < select id =FirstQOnename =firstQOneonchange =this.className = this.options [this.selectedIndex] .classNameclass =whiteselected> < option class =whiteselecteddisabled selected =selectedvalue =0>选择一个实现< / option> < option class =Notvalue =0>未实施< / option> < option class =ImplementedOnSomevalue =10>在某些系统上执行< / option> < option class =Allvalue =15>在所有系统上执行< / option> < option class =AllAndAutovalue =20>在所有系统上实施并自动化< / option> < /选择> < /形式> < / DIV> <峰; br> < div id =criticalSecurityControlForms> < form action =/ action_page.php> < select id =FirstQTwoname =firstQOneonchange =this.className = this.options [this.selectedIndex] .classNameclass =whiteselected> < option class =whiteselecteddisabled selected =selectedvalue =0>选择一个Implementation< / option> < option class =Notvalue =0>未实施< / option> < option class =ImplementedOnSomevalue =10>在某些系统上实施< / option> < option class =Allvalue =15>在所有系统上执行< / option> < option class =AllAndAutovalue =20>在所有系统上实施并自动化< / option> < /选择> < /形式> < / DIV> <峰; br> < / DIV> <脚本> function update_progressbar（）{var opt1 = parseInt（$（'option：selected'，$（'＃FirstQOne'））。val（））; var opt2 = parseInt（$（'option：selected'，$（'＃FirstQTwo'））。val（））; var opt3 = parseInt（$（'option：selected'，$（'＃FirstQThree'））。val（））; var opt4 = parseInt（$（'option：selected'，$（'＃FirstQFour'））。val（））; var opt5 = parseInt（$（'option：selected'，$（'＃FirstQFive'））。val（））; var opt6 = parseInt（$（'option：selected'，$（'＃FirstQSix'））。val（））; var opt7 = parseInt（$（'option：selected'，$（'＃FirstQSeven'））。val（））; var opt8 = parseInt（$（'option：selected'，$（'＃FirstQEight'））。val（））; var total = isNaN（opt1）？ 0：opt1; if（！isNaN（opt2））{total + = opt2; } if（！isNaN（opt3））{total + = opt3; } if（！isNaN（opt4））{total + = opt4; } if（！isNaN（opt5））{total + = opt5; } if（！isNaN（opt6））{total + = opt6; } if（！isNaN（opt7））{total + = opt7; } if（！isNaN（opt8））{total + = opt8; } $（＃progressBar）。prop（'value'，total）} $（'＃FirstQOne'）。on（'change'，update_progressbar）; $（'＃FirstQTwo'）。on（'change'，update_progressbar）; $（'＃FirstQThree'）。on（'change'，update_progressbar）; $（'＃FirstQFour'）。on（'change'，update_progressbar）; $（'＃FirstQFive'）。on（'change'，update_progressbar）; $（'＃FirstQSix'）。on（'change'，update_progressbar）; $（'＃FirstQSeven'）。on（'change'，update_progressbar）; $（'＃FirstQEight'）。on（'change'，update_progressbar）; < /脚本> < / main>< / body>< / html>
h2_lin>解决方案
使用CSS :: after 选择器和 attr（）函数为了这。 :: after 选择器将文本附加到元素的末尾，而 attr（）返回给定的值属性。
function update_progressbar（）{var opt1 = parseInt（$（'option：selected'，$（'＃FirstQOne'））。val（））; var opt2 = parseInt（$（'option：selected'，$（'＃FirstQTwo'））。val（））; var opt3 = parseInt（$（'option：selected'，$（'＃FirstQThree'））。val（））; var opt4 = parseInt（$（'option：selected'，$（'＃FirstQFour'））。val（））; var opt5 = parseInt（$（'option：selected'，$（'＃FirstQFive'））。val（））; var opt6 = parseInt（$（'option：selected'，$（'＃FirstQSix'））。val（））; var opt7 = parseInt（$（'option：selected'，$（'＃FirstQSeven'））。val（））; var opt8 = parseInt（$（'option：selected'，$（'＃FirstQEight'））。val（））; var total = isNaN（opt1）？ 0：opt1; if（！isNaN（opt2））{total + = opt2; } if（！isNaN（opt3））{total + = opt3; } if（！isNaN（opt4））{total + = opt4; } if（！isNaN（opt5））{total + = opt5; } if（！isNaN（opt6））{total + = opt6; } if（！isNaN（opt7））{total + = opt7; } if（！isNaN（opt8））{total + = opt8; （''FirstQTwo'）。$（'＃FirstQTwo'）。on（'change'，update_progressbar ）; $（'＃FirstQThree'）。on（'change'，update_progressbar）; $（'＃FirstQFour'）。on（'change'，update_progressbar）; $（'＃FirstQFive'）。on on（'＃FirstQSix'）。on（'change'，update_progressbar）; $（'＃FirstQSeven'）。on（'change'，update_progressbar）; $（'＃FirstQEight'）。on ，update_progressbar）;
progress {text-align：center; } progress：after {content：attr（value）'％';位置：相对; top：-1.15em;}
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div id =head> <峰; br> < div id =myProgress> < progress id ='progressBar'max ='100'value ='0'style =background-color：red; font-family：Impact，Charcoal，sans-serif;>< / progress> < / DIV> <！ - < div id =myProgress> < progress max =100>< div id =myBarstyle =font-family：Impact，Charcoal，sans-serif;>< strong> 0％< / strong>< < / div>>< / div>< br>< / div>< body>< br>< main class =mainarea>< ;! - ********************************************** 1111111111111111111111111 * ************************************************** ***** - >< div class =control1>< div id =criticalSecurityControlForms>< form action =/ action_page.php>< select id =FirstQOne name =firstQOneonchange =this.className = this.options [this.selectedIndex] .classNameclass =whiteselected>< option class =whiteselecteddisabled selected =selectedvalue =0> ;选择一个实现< / option>< option class =Notvalue =0>未实现< / option>< option class =ImplementedOnSomevalue =10> < /选项> < option class =Allvalue =15>在所有系统上执行< / option> < option class =AllAndAutovalue =20>在所有系统上实施并自动化< / option> < /选择> < /形式> < / DIV> <峰; br> < div id =criticalSecurityControlForms> < form action =/ action_page.php> < select id =FirstQTwoname =firstQOneonchange =this.className = this.options [this.selectedIndex] .classNameclass =whiteselected> < option class =whiteselecteddisabled selected =selectedvalue =0>选择一个Implementation< / option> < option class =Notvalue =0>未实施< / option> < option class =ImplementedOnSomevalue =10>在某些系统上实施< / option> < option class =Allvalue =15>在所有系统上执行< / option> < option class =AllAndAutovalue =20>在所有系统上实施并自动化< / option> < /选择> < /形式> < / DIV> <峰; br> < / div>
So I have a great progress bar thanks to some of you on stackoverflow. My question is how do I get text to tell the percentage of the progress bar and move with the progress bar (if the green part of the bar is at 50% I want the text to be at 25% ect...i.e always in the middle of the progress)
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Information Security Assessment</title>
<link rel="stylesheet" type="text/css" href="AuditScriptAssesmentToolTest.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<!--************************************************************************ -->
<!-- **********************************************************************************************************************************************-->
<div id="head">
<br>
<div id="myProgress">
<progress id='progressBar' max='100' value='0' style="background-color: red; font-family: Impact, Charcoal, sans-serif;" " ><strong>0%</strong></progress>
</div>
<!-- <div id="myProgress ">
<progress max="100 "><div id="myBar " style="font-family: Impact, Charcoal, sans-serif; ""><strong>0%</strong></div>
</div> -->
<br>
</div>
</head>
<body>
<br>
<main class="mainarea">
<br>
<br>
<!-- **********************************************1111111111111111111111111********************************************************-->
<div class="control1">
<div id="criticalSecurityControlForms">
<form action="/action_page.php">
<select id="FirstQOne" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
<option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
<option class="Not" value="0">Not Implemented</option>
<option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
<option class="All" value="15">Implemented on All Systems</option>
<option class="AllAndAuto" value="20">Implemented and Automated on All Systems</option>
</select>
</form>
</div>
<br>
<div id="criticalSecurityControlForms">
<form action="/action_page.php">
<select id="FirstQTwo" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
<option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
<option class="Not" value="0">Not Implemented</option>
<option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
<option class="All" value="15">Implemented on All Systems</option>
<option class="AllAndAuto" value="20">Implemented and Automated on All Systems</option>
</select>
</form>
</div>
<br>
</div>
<script>
function update_progressbar() {
var opt1 = parseInt($('option:selected', $('#FirstQOne')).val());
var opt2 = parseInt($('option:selected', $('#FirstQTwo')).val());
var opt3 = parseInt($('option:selected', $('#FirstQThree')).val());
var opt4 = parseInt($('option:selected', $('#FirstQFour')).val());
var opt5 = parseInt($('option:selected', $('#FirstQFive')).val());
var opt6 = parseInt($('option:selected', $('#FirstQSix')).val());
var opt7 = parseInt($('option:selected', $('#FirstQSeven')).val());
var opt8 = parseInt($('option:selected', $('#FirstQEight')).val());
var total = isNaN(opt1) ? 0 : opt1;
if (!isNaN(opt2)) {
total += opt2;
}
if (!isNaN(opt3)) {
total += opt3;
}
if (!isNaN(opt4)) {
total += opt4;
}
if (!isNaN(opt5)) {
total += opt5;
}
if (!isNaN(opt6)) {
total += opt6;
}
if (!isNaN(opt7)) {
total += opt7;
}
if (!isNaN(opt8)) {
total += opt8;
}
$("#progressBar").prop('value', total)
}
$('#FirstQOne').on('change', update_progressbar);
$('#FirstQTwo').on('change', update_progressbar);
$('#FirstQThree').on('change', update_progressbar);
$('#FirstQFour').on('change', update_progressbar);
$('#FirstQFive').on('change', update_progressbar);
$('#FirstQSix').on('change', update_progressbar);
$('#FirstQSeven').on('change', update_progressbar);
$('#FirstQEight').on('change', update_progressbar);
</script>
</main>
</body>
</html>
解决方案
Use the CSS ::after selector and attr() function for this. The ::after selector appends text to the end of the element, while attr() returns the value of a given attribute.
function update_progressbar() {
var opt1 = parseInt($('option:selected', $('#FirstQOne')).val());
var opt2 = parseInt($('option:selected', $('#FirstQTwo')).val());
var opt3 = parseInt($('option:selected', $('#FirstQThree')).val());
var opt4 = parseInt($('option:selected', $('#FirstQFour')).val());
var opt5 = parseInt($('option:selected', $('#FirstQFive')).val());
var opt6 = parseInt($('option:selected', $('#FirstQSix')).val());
var opt7 = parseInt($('option:selected', $('#FirstQSeven')).val());
var opt8 = parseInt($('option:selected', $('#FirstQEight')).val());
var total = isNaN(opt1) ? 0 : opt1;
if (!isNaN(opt2)) {
total += opt2;
}
if (!isNaN(opt3)) {
total += opt3;
}
if (!isNaN(opt4)) {
total += opt4;
}
if (!isNaN(opt5)) {
total += opt5;
}
if (!isNaN(opt6)) {
total += opt6;
}
if (!isNaN(opt7)) {
total += opt7;
}
if (!isNaN(opt8)) {
total += opt8;
}
$("#progressBar").prop('value', total)
}
$('#FirstQOne').on('change', update_progressbar);
$('#FirstQTwo').on('change', update_progressbar);
$('#FirstQThree').on('change', update_progressbar);
$('#FirstQFour').on('change', update_progressbar);
$('#FirstQFive').on('change', update_progressbar);
$('#FirstQSix').on('change', update_progressbar);
$('#FirstQSeven').on('change', update_progressbar);
$('#FirstQEight').on('change', update_progressbar);
progress {
text-align: center;
}
progress:after {
content: attr(value)'%';
position: relative;
top: -1.15em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="head">
<br>
<div id="myProgress">
<progress id='progressBar' max='100' value='0' style="background-color: red; font-family: Impact, Charcoal, sans-serif;"></progress>
</div>
<!-- <div id="myProgress">
<progress max="100"><div id="myBar" style="font-family: Impact, Charcoal, sans-serif;""><strong>0%</strong></div>
</div> -->
<br>
</div>
<body>
<br>
<main class="mainarea">
<br>
<br>
<!-- **********************************************1111111111111111111111111********************************************************-->
<div class="control1">
<div id="criticalSecurityControlForms">
<form action="/action_page.php">
<select id="FirstQOne" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
<option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
<option class="Not" value="0">Not Implemented</option>
<option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
<option class="All" value="15">Implemented on All Systems</option>
<option class="AllAndAuto" value="20">Implemented and Automated on All Systems</option>
</select>
</form>
</div>
<br>
<div id="criticalSecurityControlForms">
<form action="/action_page.php">
<select id="FirstQTwo" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
<option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
<option class="Not" value="0">Not Implemented</option>
<option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
<option class="All" value="15">Implemented on All Systems</option>
<option class="AllAndAuto" value="20">Implemented and Automated on All Systems</option>
</select>
</form>
</div>
<br>
</div>
这篇关于进度条文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
