一个JavaScript实现的贷款计算器

最新推荐文章于 2022-01-06 17:45:03 发布

Winterto1990

最新推荐文章于 2022-01-06 17:45:03 发布

阅读量4.9k

点赞数 1

分类专栏： JavaScript 文章标签： JS

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

基于JavaScript实现的贷款计算器：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loan Calculator</title>
<style>
.output{font-weight:bold;}
#payment{text-decoration:underline;}
#graph{border:solid black 1px;}
th,td{vertical-align:center;}
</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='470' 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 Payments:</td>
<td>$<span class='output' id='payment'></span></td>
</tr>
<tr>
<td>Total Payments:</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 width one of these fine lenders:
<div id='lenders'><div>
</td>
</tr>
</table>
<script type="text/javascript">
"use strict";
function $(id){
return document.getElementById(id);
}
function calculate (){
var amount = $('amount');
var apr = $('apr');
var years = $('years');
var zipcode = $('zipcode');
var payment = $('payment');
var total = $('total');
var totalinterest = $('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);// power method.
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){
$('amount').value = localStorage.loan_amount;
$('apr').value = localStorage.loan_apr;
$('years').value = localStorage.loan_years;
$('zipcode').value = localStorage.loan_zipcode;
}
}
function getLenders(amount,apr,years,zipcode){
if(!window.XMLHttpRequest)return ;
var ad = $('lenders');
if(!ad)return;
var url = 'getLenders.php' +
'?amt='+ encodeURIComponent(amount)+
'&apr='+ encodeURIComponent(apr)+
'&yrs='+ encodeURIComponent(years)+
'&zip='+ encodeURIComponent(zipcode);
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);
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 = $('graph');
graphgraph.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 m = (principal - equity)*interest;
equity += (monthly - m);
g.lineTo(paymentToX(p),amountToY(equity));
}
g.lineTo(paymentToX(payments),amountToY(0));
g.closePath();
g.fillStyle = 'green';
g.fill();
g.font="bold 12px sans-serif";
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 m = bal*interest;
bal -= (monthly - m);
g.lineTo(paymentToX(p),amountToY(bal));
}
g.lineWidth = 1;
g.stroke();
g.fillStyle = 'black';
g.fillText("Total Balance",20,50);
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>

效果图：

Winterto1990

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
一个JavaScript实现的贷款计算器

基于JavaScript实现的贷款计算器： > html> head> title>JavaScript Loan Calculatortitle> style> .output{font-weight:bold;} #payment{text-decoration:underline;}
复制链接

扫一扫