进度条警报

时间：2017-05-18 22:58:08

标签： javascript jquery html css

我有一个进度条，我试图这样做，当进度条达到20％时，它会显示一个div。现在，当我运行它时会自动弹出。我认为我的问题是返回当前的进度条值。我试过这样做但没有成功。

＆＃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="myProgress">
			<progress id='progressBar' max='100' value='0' style="background-color: red; font-family: Impact, Charcoal, sans-serif;"" ><strong></strong></progress>
		</div>
	</div>
<main class="mainarea">
	

		<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="4">Implemented on Some Systems</option>
                <option class="All" value="7">Implemented on All Systems</option>
                <option class="AllAndAuto" value="10">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="4">Implemented on Some Systems</option>
                <option class="All" value="7">Implemented on All Systems</option>
                <option class="AllAndAuto" value="10">Implemented and Automated on All Systems</option>
            </select>
        </form>
</div>

		

		<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQThree" name="firstQ" 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="4">Implemented on Some Systems</option>
                <option class="All" value="7">Implemented on All Systems</option>
                <option class="AllAndAuto" value="10">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>

		<br>
	
			
		<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQFour" name="firstQ" 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="4">Implemented on Some Systems</option>
                <option class="All" value="7">Implemented on All Systems</option>
                <option class="AllAndAuto" value="10">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>
	<br>
	</div>
	<br>
	<!-- *************************************************3333333333333333333****************************************************-->
	
	<!-- ******************************************** -->
	

<div id="alert1"  style="display:none;" class="answer_list" >
  <span id="closebtn"onclick="this.parentElement.style.display='none';">&times;</span>  
  <strong>Nice Job!</strong> You have completed this form.
 </div>

</main>

  <script>
 function update_progressbar() {
    var opt1 = parseFloat( $('option:selected', $('#FirstQOne')).val() );
    var opt2 = parseFloat( $('option:selected', $('#FirstQTwo')).val() );
    var opt3 = parseFloat( $('option:selected', $('#FirstQThree')).val() );
    var opt4 = parseFloat( $('option:selected', $('#FirstQFour')).val() );
    var opt5 = parseFloat( $('option:selected', $('#FirstQFive')).val() );
    var opt6 = parseFloat( $('option:selected', $('#FirstQSix')).val() );
    var opt7 = parseFloat( $('option:selected', $('#FirstQSeven')).val() );
    var opt8 = parseFloat( $('option:selected', $('#FirstQEight')).val() );
    var opt9 = parseFloat( $('option:selected', $('#FirstQNine')).val() );
    var opt10 = parseFloat( $('option:selected', $('#FirstQTen')).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;
    }
    if ( !isNaN( opt9 ) ) {
        total += opt9;
    }
    if ( !isNaN( opt10 ) ) {
        total += opt10;
    }
    $("#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 );
$('#FirstQNine').on( 'change', update_progressbar );
$('#FirstQTen').on( 'change', update_progressbar );
  </script>
  <script>
  	function showDiv() {
   document.getElementById('alert1').style.display = "block";
}
</script>

<script>
$(document).ready(function(){
  $("button").click(function(){
    
    $("#alert1").delay(600).fadeIn();
  });
});

</script>

	<script>
		$(document).ready(function(){

    $('#progressBar').text(20 + '%');

    if (parseFloat($('#progressBar').text()) == 20) { // or 
           $("#alert1").delay(600).fadeIn();
    }
});
	</script>

</body>
</html>

 





	<!-- ******************************************** -->
＆＃13;
＆＃13;
＆＃13; 下面的代码是我试图更改的代码，当进度条= 20％时它会显示它而不是立即显示＆＃34; 好工作！你有填写此表。＆＃34;出现。

$(document).ready(function(){

    $('#progressBar').text(20 + '%');

    if (parseFloat($('#progressBar').text()) == 20) { // or 
       $("#alert1").delay(600).fadeIn();
    }
});

1 个答案:

答案 0 :(得分：2)

我相信这会做你想要的吗？将匹配20％或更多的条件放入计算总数的同一函数中将触发警报框。另外，请考虑使用您正在使用的发行版附带的引导程序进度条。如下例所示

＆＃13;
＆＃13; 
function update_progressbar() {
    var opt1 = parseFloat( $('option:selected', $('#FirstQOne')).val() );
    var opt2 = parseFloat( $('option:selected', $('#FirstQTwo')).val() );
    var opt3 = parseFloat( $('option:selected', $('#FirstQThree')).val() );
    var opt4 = parseFloat( $('option:selected', $('#FirstQFour')).val() );
    var opt5 = parseFloat( $('option:selected', $('#FirstQFive')).val() );
    var opt6 = parseFloat( $('option:selected', $('#FirstQSix')).val() );
    var opt7 = parseFloat( $('option:selected', $('#FirstQSeven')).val() );
    var opt8 = parseFloat( $('option:selected', $('#FirstQEight')).val() );
    var opt9 = parseFloat( $('option:selected', $('#FirstQNine')).val() );
    var opt10 = parseFloat( $('option:selected', $('#FirstQTen')).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;
    }
    if ( !isNaN( opt9 ) ) {
        total += opt9;
    }
    if ( !isNaN( opt10 ) ) {
        total += opt10;
    }
    
    $("#progressBar").prop( 'value', total );
    
    $("#progressBar2").prop( 'aria-valuenow', total );
    $("#progressBar2").css( 'width', total + "%" );
    
    if (parseFloat(total) >= 20) { // or 
           $("#alert1").delay(600).fadeIn();
    }
    else {
           $("#alert1").delay(600).fadeOut();
    }

   }

$('#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 );
$('#FirstQNine').on( 'change', update_progressbar );
$('#FirstQTen').on( 'change', update_progressbar );

function showDiv() {
   document.getElementById('alert1').style.display = "block";
}

$(document).ready(function(){


    $('#progressBar').text(20 + '%');


});
＆＃13; 
<link rel="stylesheet" type="text/css" href="AuditScriptAssesmentToolTest.css">
  	<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.min.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 class="progress">
  <div id="progressBar2" class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
  </div>
</div>


    

<div id="myProgress">
			<progress id='progressBar' max='100' value='0' style="background-color: red; font-family: Impact, Charcoal, sans-serif;"" ><strong></strong></progress>
	</div>
<main class="mainarea">
	

		<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="4">Implemented on Some Systems</option>
                <option class="All" value="7">Implemented on All Systems</option>
                <option class="AllAndAuto" value="10">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>

			
		<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="4">Implemented on Some Systems</option>
                <option class="All" value="7">Implemented on All Systems</option>
                <option class="AllAndAuto" value="10">Implemented and Automated on All Systems</option>
            </select>
        </form>
</div>

		

		<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQThree" name="firstQ" 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="4">Implemented on Some Systems</option>
                <option class="All" value="7">Implemented on All Systems</option>
                <option class="AllAndAuto" value="10">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>

		<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQFour" name="firstQ" 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="4">Implemented on Some Systems</option>
                <option class="All" value="7">Implemented on All Systems</option>
                <option class="AllAndAuto" value="10">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>

	</div>

	

<div id="alert1"  style="display:none;" class="answer_list" >
  <span id="closebtn"onclick="this.parentElement.style.display='none';">&times;</span>  
  <strong>Nice Job!</strong> You have completed this form.
 </div>

</main>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题