<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<th>Enter Loan Data:</th>
<td></td>
<th>Loan Balance, Interest Payments</th>
</tr>
<tr>
<td>Amount of 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>
Repayments 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 id="payment"></span></td>
</tr>
<tr>
<td>
Total payment:
</td>
<td>$<span id="total"></span></td>
</tr>
<tr>
<td>
Total interest:
</td>
<td>$<span id="totalinterest"></span></td>
</tr>
<tr>
<td></td>
<td></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>
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');
// amount 贷款总额
var principle = parseFloat(amount.value);
// apr 年利率
var interest = parseFloat(apr.value) /100 /12;
// 偿还周期 月份
var payments = parseFloat(years.value) * 12;
// pow 求次幂
var x = Math.pow(1 + interest, payments);
// monthly 每月还款金额
var monthly = (principle * x * interest) / (x-1);
if(isFinite(monthly)){
payment.innerHTML = monthly.toFixed(2);
total.innerHTML = (monthly * payments).toFixed(2);
totalinterest.innerHTML = (monthly * payments - principle).toFixed(2);
// 保存数据到本地
// save(amount.value, apr.value, years.value, zipcode.value);
save(amount.value, apr.value, years.value, '');
// 借贷人省略
// 画图
chart(principle, 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 chart(principle, interest, monthly, payments){
var graph = document.getElementById('graph');
graph.width = graph.width;
if(!graph.getContext) return;
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 = "bold 12px '微软雅黑'";
//g.fillStyle = "yellow";
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 = (principle - equity) * interest;
equity += (monthly - thisMonthsInterest);
g.lineTo(paymentToX(p), amountToY(equity));
}
g.lineTo(paymentToX(payments), amountToY(0));
g.fillStyle = 'green';
g.fill();
g.fillText('Total Equity', 20, 35);
//画余额
var bal = principle;
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.fillStyle='black';
g.stroke();
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, principle];
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>示例图片如下：
源码下载地址：js 贷款计算器源码下载地址
