0
下面是一个简单的JavaScript/jQuery百分比变化计算器的代码。用户以两种单独的形式输入它们的两个期望值，结果以下面的div格式返回。有两个按钮，Calculate（调用pChange功能）和Clear the Div（调用清除功能）。该功能正常工作，直到用户使用清除功能清除答案区。按下清除按钮后，该功能不再将答案文本附加到答案文本格。清除HTML中断追加在jquery
//Percent change Calculation
var pChange = function(){
var a = document.getElementById("number1").value;
var b = document.getElementById("number2").value;
var c = b-a;
var fOutPut = c/a;
fOutput=fOutPut*100;
var finalOut=fOutput.toFixed(2);
$('#answerText').append("<p><strong>" + "The percentage change is "+finalOut+ "%" + "</strong></p>");
};
//ClearPage Function
var Clear = function(){
$('#answer').html("");
};
//Submit via enter key press instead of button event.
$("#number2").keyup(function(event){
if(event.keyCode == 13){
$("#Calc").click();
}
});
此外，HTML
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script src="materialize/js/materialize.min.js"></script>
<script src="slidebars.min.js"></script>
<link type="text/css" rel="stylesheet" href="materialize/css/materialize.css" media="screen,projection"/>
<title>Percent Change Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Slidebars CSS -->
<link rel="stylesheet" href="slidebars.css">
<link rel="stylesheet" href="Percent.css"
</head>
<body>
<!--Main content-->
<div id="sb-site">
<div class="navbar-fixed">
<nav>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
<div class="nav-wrapper">
<div class="sb-toggle-left">
<a href="#" class="brand-logo"><img class="navicon" src="navicon-round.svg"></img></a>
</div>
<a href="#" class="brand-logo center">Percent Change Calculator</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a class="dropdown-button" href="#" data-activates="dropdown1">Math Tools<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
</ul>
</div>
</nav>
</div>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#">Percent Change</a></li>
<li class="divider"></li>
<li><a href="trianglecalculator.html">Triangle Calculator</a></li>
</ul>
<!--Alternate Menu Toggle-->
<!--<div id="ButtonContainer">
<div class="sb-toggle-left">
<div class="navicon-line"></div>
<div class="navicon-line"></div>
<div class="navicon-line"></div>
</div>-->
<div id="input-fields">
<div class="row">
<div class="input-field col s3">
<input value="Number #1" id="number1" type="number" class="validate">
<label class="active" for="number1">Number #1</label>
</div>
</div>
<div class="row">
<div class='input-field col s3'>
<input value="Number #1" id="number2" type="number" class="validate">
<label class="active" for="number2">Number #2</label>
</div>
</div>
<div id='answer'>
<div id='answerText'></div></div>
<table>
<tr>
<td>
<button id = "Calc" type = 'button' onclick = "pChange();">Click to Calculate Percent Change</button>
</td>
<td>
<button id = "Clear" type = 'button' onclick = "Clear();">Click to clear screen</button>
</td>
</tr>
</table>
</div>
</div>
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="140">
<!-- Your left Slidebar content. -->
<ul id="dropdown2" class="dropdown-content">
<li><a href="#">About Me</a></li>
<li class="divider"></li>
<li><a href="#">About This Site</a></li>
</ul>
<ul id="homedropdown" class="dropdown-content">
</li>
<li><a href="#!">two</a></li>
<li><a href="#!">three</a></li>
</ul>
<a class="btn dropdown-button" href="#!" data-activates="dropdown2">About<i class="mdi-navigation-arrow-drop-down right"></i></a>
<a class="btn dropdown-button" href="#!" data-activates="homedropdown">Tools<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="sb-slidebar sb-right">
</div>
</body>
</html>