我是以下代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript">
function isNumberKey(as) {
var dd = as.value;
if (isNaN(dd)) {
dd = dd.substring(0, (dd.length - 1));
as.value = dd;
}
}
function activate(){
document.getElementById('rate').readOnly=false;
}
function deactivate(){
document.getElementById('rate').readOnly=true;
var int = document.calc.loan.value;
if(int > 50000 && int < 100000){
document.calc.rate.value=10;
}
if(int > 100000 && int < 150000){
document.calc.rate.value=12;
}
}
function showpay() {
var a = document.calc.loan.value;
var b = document.calc.rate.value;
var c = document.calc.months.value;
var n = c ;
var r = b / (12 * 100);
var p = (a * r * Math.pow((1 + r), n)) / (Math.pow((1 + r), n) - 1);
var prin = Math.round(p * 100) / 100;
document.calc.pay.value = Math.round(prin);
// document.calc.totInt.value = round((prin * c) - a);
// document.calc.totpay.value = round((prin * c) - a);
document.calc.totInt.value = Math.round((prin * c) - a);
document.calc.totpay.value = Math.round(prin * c);
} </script>
</head>
<body class="body">
<header class="mainheader">
<img src="img/logo.gif" alt=""/>
<nav>
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li class="active"><a href="calculators.html">Calculators</a></li>
<li><a href="contactuS.html">Contact Us</a></li>
</ul>
</nav>
</header><br>
<div class="maincontent">
<div class="content" style="width:100%">
<article class="topcontent">
<header><h2 style="align:center" title="firstpost"><p align="center" style="color: #CF5C3F;">Loan Calculator</p></h2></header>
<footer>
<p class="post-info"></p>
</footer>
<content>
<p>
<center>
<form name="calc">
<table width="200" border="1">
<tbody>
<tr>
<th scope="col">Description</th>
<th scope="col">Data Entry</th>
</tr>
<tr>
<td>Principle($)</td>
<td><input type="text" name="loan" id="loan" placeholder="Enter the amount Required" onkeypress="isNumberKey(this)"/>
</td><span id="error"/>
</tr>
<tr>
<td>Do you know Rate of Interest</td>
<td>
<input type="radio" name="radio" value="Yes" onClick="activate()">Yes<br/>
<input type="radio" name="radio" value="No" onClick="deactivate()">No
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>Interest(%)</td>
<td><input type="text" name="rate" id="rate" placeholder="Enter the Interest Rate" onkeypress="isNumberKey(this)"/>
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>Tenure(in Months)</td>
<td>
<input type="text" name="months" id="months" placeholder="Enter the Tenure in Months" onkeypress="isNumberKey(this)"/>
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>EMI</td>
<td>
<input name="textfield4" type="text" id="pay" placeholder="Your EMI" readonly/></td>
</tr>
<tr>
<td align="center"><input type="button" value="Submit" onClick='showpay()'/></td>
<td align="center"><input type="reset" value="Reset"/></td>
</tr>
<tr>
<td>Total Interest Paid</td>
<td>
<input name="totInt" type="text" id="totInt" placeholder="Total Interest" readonly/></td>
</tr>
<tr>
<td>Total Repay Amount</td>
<td>
<input name="totpay" type="text" id="totpay" placeholder="Total Amount" readonly/></td>
</tr>
</tbody>
</table>
</form>
</center>
</p>
</content>
</article>
</div>
</div>
<footer class="mainfooter">
<p>this is copyright ©</p>
</footer>
</body>
</html>
这里我试图实现以下目标。
如果用户选择Yes单选按钮，则兴趣旁边的文本框应接受手动输入，否则，兴趣应如下所示。
如果用户输入介于50000和100000之间的金额，则兴趣应显示为15
并根据此兴趣计算金额。
当我输入金额和热门号码
时，我无法获得该号码请让我知道我怎么能得到这个。
由于
答案 0 :(得分：1)
尝试使用angularJS方式。
以角度样式查看此代码。没有Jquery。
HTML
<div ng-app>
<nav>
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li class="active"><a href="calculators.html">Calculators</a></li>
<li><a href="contactuS.html">Contact Us</a></li>
</ul>
</nav>
</header><br>
<div class="maincontent">
<div class="content" style="width:100%">
<article class="topcontent">
<header><h2 style="align:center" title="firstpost"><p align="center" style="color: #CF5C3F;">Loan Calculator</p></h2></header>
<footer>
<p class="post-info"></p>
</footer>
<content ng-controller="CalcCtrl">
<p>
<center>
<form name="calc">
<table width="200" border="1">
<tbody>
<tr>
<th scope="col">Description</th>
<th scope="col">Data Entry</th>
</tr>
<tr>
<td>Principle($)</td>
<td><input type="text" name="loan" id="loan" ng-model="loan" placeholder="Enter the amount Required" ng-change="isNumberKey()"/>
</td><span id="error"/>
</tr>
<tr>
<td>Do you know Rate of Interest</td>
<td>
<input type="radio" name="radio" value="Yes" ng-change="change()" ng-model="rateint">Yes<br/>
<input type="radio" name="radio" value="No" ng-change="change()" ng-model="rateint">No
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>Interest(%)</td>
<td><input type="text" name="rate" id="rate" ng-model="rate" placeholder="Enter the Interest Rate" onkeypress="isNumberKey()" ng-disabled="rateint != 'Yes'" />
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>Tenure(in Months)</td>
<td>
<input type="text" name="months" id="months" ng-model="months" placeholder="Enter the Tenure in Months" ng-change="isNumberKey()"/>
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>EMI</td>
<td>
<input name="textfield4" type="text" id="pay" ng-model="pay" placeholder="Your EMI" readonly/></td>
</tr>
<tr>
<td align="center"><input type="button" value="Submit" ng-click="showpay()"/></td>
<td align="center"><input type="reset" value="Reset"/></td>
</tr>
<tr>
<td>Total Interest Paid</td>
<td>
<input name="totInt" type="text" ng-model="toInt" id="totInt" placeholder="Total Interest" readonly/></td>
</tr>
<tr>
<td>Total Repay Amount</td>
<td>
<input name="totpay" type="text" ng-model="topay" id="totpay" placeholder="Total Amount" readonly/></td>
</tr>
</tbody>
</table>
</form>
</center>
</p>
</content>
</article>
</div>
</div>
<footer class="mainfooter">
<p>this is copyright ©</p>
</footer>
</div>
JS
function CalcCtrl($scope) {
$scope.loan = $scope.loan ? $scope.loan : 0
$scope.rate = $scope.rate ? $scope.rate : 1
$scope.months = $scope.months ? $scope.months : 1
$scope.isNumberKey = function() {
var dd = $scope.loan;
if (dd && isNaN(dd)) {
dd = dd.substring(0, (dd.length - 1));
$scope.loan = dd;
}
}
$scope.change = function(){
if ($scope.rateint === 'No'){
var loan = $scope.loan
if(loan > 50000 && loan < 100000){
$scope.rate=10;
}
if(loan > 100000 && loan < 150000){
$scope.rate=12;
}
}
}
$scope.showpay = function() {
var a = $scope.loan;
var b = $scope.rate;
var c = $scope.months
console.log(a,b,c)
var n = c ;
var r = b / (12 * 100);
console.log(b)
var p = (a * r * Math.pow((1 + r), n)) / (Math.pow((1 + r), n) - 1);
var prin = Math.round(p * 100) / 100;
$scope.pay = Math.round(prin);
// document.calc.totInt.value = round((prin * c) - a);
// document.calc.totpay.value = round((prin * c) - a);
$scope.toInt = Math.round((prin * c) - a);
$scope.topay = Math.round(prin * c);
}
}
看到这个工作小提琴。
http://jsfiddle.net/U3pVM/10271/
在看到angularjs文档之后：
答案 1 :(得分：1)
试试这个：）
<script type="application/javascript">
function isNumberKey(id) {
var dd = document.getElementById(id).value;
if (isNaN(dd)) {
dd = dd.substring(0, (dd.length - 1));
document.getElementById(id).value = dd;
}
}
function activate(){
document.getElementById('rate').readOnly =false;
console.log(document.getElementById('rate').readOnly)
}
function deactivate(){
document.getElementById('rate').readOnly =true;
console.log(document.getElementById('rate').readOnly)
var int = document.calc.loan.value;
if(int > 50000 && int < 100000){
document.calc.rate.value=10;
}
if(int > 100000 && int < 150000){
document.calc.rate.value=12;
}
}
function showpay() {
var a = document.calc.loan.value;
var b = document.calc.rate.value ? document.calc.rate.value : 1;
var c = document.calc.months.value;
var n = c ;
var r = b / (12 * 100);
var p = (a * r * Math.pow((1 + r), n)) / (Math.pow((1 + r), n) - 1);
var prin = Math.round(p * 100) / 100;
document.calc.pay.value = Math.round(prin);
// document.calc.totInt.value = round((prin * c) - a);
// document.calc.totpay.value = round((prin * c) - a);
document.calc.totInt.value = Math.round((prin * c) - a);
document.calc.totpay.value = Math.round(prin * c);
}
</script>
<div>
<nav>
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li class="active"><a href="calculators.html">Calculators</a></li>
<li><a href="contactuS.html">Contact Us</a></li>
</ul>
</nav>
</header><br>
<div class="maincontent">
<div class="content" style="width:100%">
<article class="topcontent">
<header><h2 style="align:center" title="firstpost"><p align="center" style="color: #CF5C3F;">Loan Calculator</p></h2></header>
<footer>
<p class="post-info"></p>
</footer>
<content>
<p>
<center>
<form name="calc">
<table width="200" border="1">
<tbody>
<tr>
<th scope="col">Description</th>
<th scope="col">Data Entry</th>
</tr>
<tr>
<td>Principle($)</td>
<td><input type="text" name="loan" id="loan" placeholder="Enter the amount Required" onkeypress="isNumberKey('loan')"/>
</td><span id="error"/>
</tr>
<tr>
<td>Do you know Rate of Interest</td>
<td>
<input type="radio" name="radio" value="Yes" onclick="activate()">Yes<br/>
<input type="radio" name="radio" value="No" onclick="deactivate()">No
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>Interest(%)</td>
<td><input type="text" name="rate" id="rate" readonly="" placeholder="Enter the Interest Rate" onkeypress="isNumberKey('rate')" />
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>Tenure(in Months)</td>
<td>
<input type="text" name="months" id="months" placeholder="Enter the Tenure in Months" onkeypress="isNumberKey('months')"/>
</td><!--<span id="error"/>-->
</tr>
<tr>
<td>EMI</td>
<td>
<input name="textfield4" type="text" id="pay" placeholder="Your EMI" readonly/></td>
</tr>
<tr>
<td align="center"><input type="button" value="Submit" onclick="showpay()"/></td>
<td align="center"><input type="reset" value="Reset"/></td>
</tr>
<tr>
<td>Total Interest Paid</td>
<td>
<input name="totInt" type="text" id="totInt" placeholder="Total Interest" readonly/></td>
</tr>
<tr>
<td>Total Repay Amount</td>
<td>
<input name="totpay" type="text" id="totpay" placeholder="Total Amount" readonly/></td>
</tr>
</tbody>
</table>
</form>
</center>
</p>
</content>
</article>
</div>
</div>
<footer class="mainfooter">
<p>this is copyright ©</p>
</footer>
</div>