进度栏文字

时间：2017-05-14 23:25:28

标签： javascript jquery html css

所以我有一个很棒的进度吧感谢你们中的一些人在stackoverflow上。我的问题是如何获取文本以告诉进度条的百分比并随进度条移动（如果条形图的绿色部分为50％我希望文本处于25％等等...即始终在中间的进展）

谢谢！

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

使用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;
  }
  $("#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>

答案 1 :(得分：0)

我不会使用那么多代码。看看这个https://jsfiddle.net/nojja492/1/（改进的例子）

＆＃13;
＆＃13; 
var percent = '50%';
$('#mybar .percentage').css('width', percent).text(percent);
＆＃13; 
.progressbar {
  border:1px solid black;
  width:100px;
  height:20px;
  padding:1px;
}
.percentage {
  text-align: center;
  background:red;
  height: 100%;
  font-size:11px;
  line-height: 20px;
}
＆＃13; 
<div id="mybar" class="progressbar">
    <div class="percentage"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题