<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>javascript学习</title>
<style>
.output {
font-weight: bold;
}
#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>
<td>
Approximate Payments:
</td>
<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:
<p id="lenders">
</p>
</td>
</tr>
</table>
<script>
'use strict';
function calculate () {
var amount = document.getElementById('amount');
var apr = document.getElementById('apr');
var years = document.getElementById('years');
var zipcode = document.getElementById('zipcode');
var payment = document.getElementById('payment');
var total = document.getElementById('total');
var 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);
// 如果没超过js可以表示的数字范围，并且用户输入正确
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 = amount;
}
}
// 文档首次加载时，将会尝试还原输入字段
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.XMLHttpRequest)
return;
var ad = document.getElementById('lenders');
if (!ad)
return;
// 用户输入的数据进行url编码，并作为查询参数附加在url中
var url = 'getLenders.php' + '&?amt=' + encodeURIComponent(amount) + '&?apr=' + encodeURIComponent(apr) + '&?yrs=' + encodeURIComponent(years) + '&zip=' + encodeURIComponent(zipcode);
// 通过xml对象提取返回数据
var req = new XMLHttpRequest();
req.open('GET', url);
req.send(null);
// 在返回数据之前，注册一个事件处理函数，这个处理函数在服务器响应返回客户端的时候调用
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
var response = req.responseText;
var lenders = JSON.parse(response);
for (var i = 0; i < lenders.length; i++) {
list += "<li><a href='" + lenders[i].url + "'>" + lenders[i].name + "</a>";
}
ad.innerHTML = "<ul>" + list + "</ul>";
}
}
}
// 在html的<canvas>中用图表展示月度贷款余额、利息和资产收益
// 如果不传入参数的话，则清空之前的图表数据
function chart(principal, interest, monthly, payments){
var graph = document.getElementById('graph');
graph.width = graph.width; //清除并重置画布
if (arguments.length === 0 || !graph.getContext)
return;
// 获得画布元素的‘context’对象，这个对象定义了一组绘画api
var g = graph.getContext('2d');
var width = graph.width;
var 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 = 'blod 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(p), amountToY(bal));
for (var p = 0; 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);
// 将年度数据在x轴做标记
g.textAlign = 'center';
var y = amountToY(0);
for (var year = 1; year * 12 <= payments; year++) {
var x = paymentToX(year * 12);
g.fillRect(x - 0.5, y - 3, 1, 3);
if (year === 1)
g.fillText('Year', x, y - 5);
if (year % 5 === 0 && year * 12 !== payments)
g.fillText(String(year), x, y - 5);
}
g.textAlign = 'right';
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>
相关文章：
相关视频：
立即学习“Java免费学习笔记（深入）”；
