<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贷款计算器</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>
<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>Annul interset (%):</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 onchange="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="total" id="total"></span></td>
</tr>
<tr>
<td>Total interset:</td>
<td>$<span class="output" id="totalinterset"></span></td>
</tr>
<tr><th>Sponsors:</th><td colspan="2">Apply for you loan with one of these fine lenders:
<div id="lenders"></div>
</td></tr>
</table>
</body>
<script>
"use strict"; //如果浏览器支持,则开启ECMAScript 5 的严格模式
function calculate(){
console.log(3);
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 totalinterset = document.getElementById("totalinterset");
//将年度转换为月度赔付数据
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);
totalinterset.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 = "";
totalinterset.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.XMLHttpRequest) 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 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,interset,monthly,payments){
console.log(0);
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 Interset Payments",20,20);
var equity = 0;
g.beginPath();
g.moveTo(paymentToX(0),amountToY(0));
for(var p = 1; p <= payments ; p++ ){
var thisMothsInterest = (principal - equity) *interset;
equity += (monthly - thisMothsInterest);
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 thisMothsInterest = bal * interset;
bal -= (monthly - thisMothsInterest);
g.lineTo(paymentToX(p),amountToY(bal));
}
g.lineWidth = 3;
g.stroke();
g.fillStyle = "black";
g.fillText("Loan 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>
</html>