-1
我有一個進度條，我試圖讓進度條達到20％時顯示一個div。現在當我運行它時會自動彈出。我認爲我的問題是返回當前的進度欄值。我試過這樣做，但沒有成功。進度條提示
<!DOCTYPE html>
<html>
<head>
\t <title>Information Security Assessment</title>
\t <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">
\t \t \t <progress id='progressBar' max='100' value='0' style="background-color: red; font-family: Impact, Charcoal, sans-serif;"" ><strong></strong></progress>
\t \t </div>
\t </div>
<main class="mainarea">
\t
\t \t <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>
\t \t <br>
\t \t \t
\t \t <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>
\t \t
\t \t <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>
\t \t <br>
\t
\t \t \t
\t \t <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>
\t <br>
\t </div>
\t <br>
\t <!-- *************************************************3333333333333333333****************************************************-->
\t
\t <!-- ******************************************** -->
\t
<div id="alert1" style="display:none;" class="answer_list" >
<span id="closebtn"onclick="this.parentElement.style.display='none';">×</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>
\t function showDiv() {
document.getElementById('alert1').style.display = "block";
}
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#alert1").delay(600).fadeIn();
});
});
</script>
\t <script>
\t \t $(document).ready(function(){
$('#progressBar').text(20 + '%');
if (parseFloat($('#progressBar').text()) == 20) { // or
$("#alert1").delay(600).fadeIn();
}
});
\t </script>
</body>
</html>
\t <!-- ******************************************** -->
\t
\t$(document).ready(function(){
$('#progressBar').text(20 + '%');
if (parseFloat($('#progressBar').text()) == 20) { // or
$("#alert1").delay(600).fadeIn();
}
});
內部文檔準備功能，您有'$（ '＃進度條'）文本（20 + '％'）;'這立即引發你的病情 – pokeybit