一个JavaScript实现的贷款计算器

基于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>

效果图：

一个JavaScript实现的贷款计算器相关推荐

每天一个JavaScript实例-apply和call的使用方法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
每天一个JavaScript实例-获取元素当前高度
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
如何在另一个JavaScript文件中包含一个JavaScript文件？
JavaScript中是否有类似于CSS中@import的内容,可让您在另一个JavaScript文件中包含一个JavaScript文件? #1楼而不是在运行时添加,而是使用脚本在上传之前进行串联. ...
优雅的创建一个JavaScript库
这篇文章的目的是通过演示一个简单的例子来介绍在JS中实例化和定义一个库的正确方法,以优化他人编写或维护自己的JS库. 在我们深入之前,我做了两点假设: 你知道简单的JavaScript或C语言. 你不 ...
为什么 Web 开发人员需要学习一个 JavaScript 框架？
原文链接可能当我们结束本文时,一个新的 Javascript 框架已经在某处启动了.但这确实不在我们的控制范围内.因此,我们应该简单地继续我们所拥有的.至少,由于免责声明,我们可以确定我们不是在发明 ...
每天一个JavaScript实例-canvas绘图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
手把手带你写一个JavaScript类型判断小工具
业务写了很多,依然不是前端大神,我相信这是很多'入坑'前端开发同学的迷茫之处,个人觉得前端职业发展是有路径可寻的,前期写业务是一个积累过程,后期提炼总结,比如编程思想,父子类的原型继承,还是对象之间的 ...
每天一个JavaScript实例-动态省份选择城市
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
推荐一个JavaScript触发器插件，可通过指定频次、指定时间内触发指定的处理函数...
推荐一个JavaScript触发器插件js-trigger js-trigger是一个JavaScript触发器插件,可通过指定频次.指定时间内触发指定的处理函数 https://tanwei-cc. ...

一个JavaScript实现的贷款计算器

一个JavaScript实现的贷款计算器相关推荐

最新文章

热门文章