JavaScript权威指南练习代码

最新推荐文章于 2024-05-02 18:10:14 发布
xh1_2_3
最新推荐文章于 2024-05-02 18:10:14 发布
阅读量223
点赞数
文章标签： js
本文链接：https://blog.youkuaiyun.com/xh1_2_3/article/details/106733971
版权
1.JavaScript贷款计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style type="text/css">
    	.output{font-weight: blod;}
    	#payment{text-decoration: underline;}
    	#graph{border: solid black 1px;}
    	th,td{vertical-align: top;}
    </style>
</head>
<body>

	<table>
		<tr>
			<th>Enter Loan Data:</th>
			<td></td>
			<th>Loan Balance, Cumulative Equity, and Interest Payments</th>
		</tr>
		<tr>
			<td>Amount of the Loan ($):</td>
			<td><input id="amount" onchange="calculate();"></td>
			<td rowspan=8>
				<canvas id="graph" width="400" height="250"></canvas>
			</td>
		</tr>
		<tr>
			<td>Annual interest (%):</td>
			<td><input id="apr" onchange="calculate();"></td>
		</tr>
		<tr>
			<td>Repayment period (years):</td>
			<td><input id="years" onchange="calculate();"></td>
		</tr>
		<tr>
			<td>Zipcode (to find lenders):</td>
			<td><input id="zipcode" onchange="calculate();"></td>
		</tr>
		<tr>
			<th>Approximate Payments:</th>
			<td><button onclick="calculate();">Calculate</button></td>
		</tr>
		<tr>
			<td>Monthly payment:</td>
			<td>$<span class="output" id="payment" ></span></td>
		</tr>
		<tr>
			<td>Total payment:</td>
			<td>$<span class="output" id="total"></span></td>
		</tr>
		<tr>
			<td>Total interest:</td>
			<td>$<span class="output" id="totalinterest"></span></td></tr>
		<tr>
			<th>Sponsors:</th>
			<td colspan=2>Apply for your loan with one of these fine lenders :
				<div id="lenders"></div>
			</td>
		</tr>
	</table>

<script type="text/javascript">
"use strict";

function calculate()
{
	var amount = document.getElementById('amount'),
		apr = document.getElementById('apr'),
		years = document.getElementById('years'),
		zipcode = document.getElementById('zipcode'),
		payment = document.getElementById("payment"),
		total = document.getElementById('total'),
		totalinterest = document.getElementById("totalinterest");

	var principal = parseFloat(amount.value);
	var interest = parseFloat(apr.value)/100/12;
	var payments = parseFloat(years.value)*12;

	var x = Math.pow(1+interest,payments);
	var monthly = (principal*x * interest)/(x -1);

	if(isFinite(monthly)){
		payment.innerHTML = monthly.toFixed(2);
		total.innerHTML = (monthly*payments).toFixed(2);
		totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);

		save(amount.value,apr.value,years.value,zipcode.value);

		try{
			getLenders(amount.value,apr.value,years.value,zipcode.value);
		} catch(e){/* 忽略异常 */}

		chart(principal, interest, monthly, payments);
	} else {
		payment.innerHTML = '';
		total.innerHTML = '';
		totalinterest.innerHTML = '';
		chart();
	}
}

function save(amount, apr, years, zipcode){
	if(window.localStorage) {
		localStorage.loan_amount = amount;
		localStorage.loan_apr = apr;
		localStorage.loan_years = years;
		localStorage.loan_zipcode = zipcode;
	}
}

window.onload = function(){
	if(window.localStorage && localStorage.loan_amount){
		document.getElementById('amount').value = localStorage.loan_amount;
		document.getElementById('apr').value = localStorage.loan_apr;
		document.getElementById('years').value = localStorage.loan_years;
		document.getElementById('zipcode').value = localStorage.loan_zipcode;
	}
}

function getLenders(amount, apr, years, zipcode){
	if(!window.XMLHttpReques) return;

	var ad = document.getElementById('lenders');
	if(!ad) return;

	var url = 'getLenders.php' + 
	"?amt="+ encodeURIComponent(amount)+
	"&apr="+ encodeURIComponent(apr) + 
	"&yrs="+ encodeURIComponent(years)+
	"&zip="+ encodeURIComponent(zipcode);

	var req = new XMLHttpReques();
	req.open('GET', url);
	req.send(null);

	req.onreadystatechange = function(){
		if(req.readyState == 4 && req.status == 200){
			var response = req.responseText;
			var lenders = JSON.pare(response);

			var list = '';
			for (var i = 0; i<lenders.length;i++){
				list += '<li><a href="'+lenders[i].url+'">'+lenders[i].name + '</a>';
			}
			ad.innerHTML = "<ul>"+list+"</ul>";
		}
	}
}

function chart(principal, interest, monthly, payments){
	var graph = document.getElementById('graph');
	graph.width = graph.width;

	if(arguments.length == 0 || !graph.getContext) return ;

	var g = graph.getContext('2d');
	var width = graph.width,
		height = graph.height;

	function paymentToX(n){
		return n*width/payments;
	}

	function amountToY(a){
		return height -(a*height/(monthly*payments*1.05));
	}

	g.moveTo(paymentToX(0), amountToY(0));
	g.lineTo(paymentToX(payments),amountToY(monthly*payments));
	g.lineTo(paymentToX(payments), amountToY(0));
	g.closePath();
	g.fillStyle = '#f88';
	g.fill();
	g.font='bold 12px sans-serif';
	g.fillText("Total Interest Payments",20,20);

	var equity = 0;
	g.beginPath();
	g.moveTo(paymentToX(0),amountToY(0));
	for(var p = 1;p <= payments; p++){
		var thisMonthsInterest = (principal -equity)*interest;
		equity += (monthly - thisMonthsInterest);
		g.lineTo(paymentToX(p),amountToY(equity));
	}
	g.lineTo(paymentToX(payments), amountToY(0));
	g.closePath();
	g.fillStyle = 'green';
	g.fill();
	g.fillText('Total Equity', 20, 35);

	var bal = principal;
	g.beginPath();
	g.moveTo(paymentToX(0), amountToY(bal));
	for (var p = 1; p<= payments; p++){
		var thisMonthsInterest = bal * interest;
		bal -= (monthly - thisMonthsInterest);
		g.lineTo(paymentToX(p), amountToY(bal));
	}
	g.lineWidth = 3;
	g.stroke();
	g.fillStyle = 'black';
	g.fillText('Loan Balance', 20, 50);

	g.textAlign = 'center';
	g.textBaseline = 'middle';
	var ticks = [monthly * payments, principal];
	var rightEdge = paymentToX(payments);
	for (var i = 0; i < ticks.length; i++ ){
		var y = amountToY(ticks[i]);
		g.fillRect(rightEdge-3,y-0.5,3,1);
		g.fillText(String(ticks[i].toFixed(0)),rightEdge-5, y);
	}
}
</script>
</body>
</html>
运行结果