javascript - 进度条提醒

标签 javascript jquery html css

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

<!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>

 





	<!-- ******************************************** -->
下面的代码是我试图更改的代码，因此当进度条 = 20% 时它将显示它，而不是立即显示“干得好!您已完成此表单。”出现。

$(document).ready(function(){

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

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

最佳答案

我相信这可以满足您的需求？将匹配 20% 或更多的条件放入计算总数的相同函数中将触发警告框。还可以考虑使用您正在使用的发行版附带的 Bootstrap 进度条。如下例所示

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 + '%');


});
<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>

关于javascript - 进度条提醒，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44059036/

上一篇：html - 很棒的字体图标无法离线使用

下一篇：html - 强制表格与内容需要的一样宽

相关文章：

javascript - angularjs 什么时候应该使用指令

javascript - 全局 JavaScript 异常处理程序(在 Chrome 中)

javascript - 将简单的 jQuery 动画转换为 zepto.js？

html - 删除两个div之间的空间

php - 如何使用 PHP 中数据库中的内容将 HTML 文件附加到电子邮件？

javascript - 拖放到 HTML 对象标签上

javascript - 在 xtype 标记字段中，发送到服务器的值显示为单个组合行。 Extjs

javascript - 如何使用 javascript 确定用户区域设置日期格式(格式为 dd/mm 或 mm/dd)？

jquery - Firefox Web 开发者工具栏导致奇怪的行为

javascript - 运用于. ("submit") HTML 表单不起作用

©2024 IT工具网  联系我们