Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

javascript - Progress Bar text

0 votes
686 views
in Technique[技术] by (71.8m points)

javascript - Progress Bar text

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

2.1m questions

2.1m answers

60 comments

56.8k users

Most popular tags

Powered by Question2Answer
Donate
Theme by Q2A Market&&OStack.cn
...