一个JavaScript贷款计算器

流觞 · 发表于 2018-1-3 02:41:49

练习案例时间2018/01/02

一个JavaScript贷款计算器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HelloJs4</title>
<style>
/*这是一个CSS样式表：定义了输出程序的样式*/
.output {
font-weight: bold;
} /*定义计算结果为粗体*/
#payment {
text-decoration: underline
} /*定义 id = payment的元素样式*/
#graph {
border: solid #000 1px;
} /*图标有一个1像素的边框*/
th, td {
vertical-algin: top
}/*表格单元格对齐方式为顶端对其*/
</style>
</head>
<body>
<div>
<div>
<p>练习案例时间2018/01/01</p>
</div>
<div>
<p>一个JavaScript贷款计算器</p>
</div>
<div>
<table>
<tr>
<th>Enter Loan Data:</th>
<td></td>
<th>Loan Balance,Cumulative Equity,and Interest Payments</th>
</tr>
<tr>
<td>Aoumnt of the loan($):</td>
<td><input id="amount" onChange="calcuate();"/></td>
<td rowspan="8">
<canvas id="graph" width="400" height="250"></canvas>
</td>
</tr>
<tr>
<td>Annual interest(%):</td>
<td><input id="apr" onChange="calcuate();"/></td>
</tr>
<tr>
<td>Repayment period(years):</td>
<td><input id="years" onChange="calcuate();"/></td>
</tr>
<tr>
<td>Zipcode (to find lenders):</td>
<td><input id="zipcode" onChange="calcuate();"/></td>
</tr>
<tr>
<td>Approximate Payments:</td>
<td><button onClick="calcuate()">Calcuate</button></td>
</tr>
<tr>
<td>Monthly payment:</td>
<td>lt;span class="output" id="payment"></span></td>
</tr>
<tr>
<td>Total payment:</td>
<td>lt;span class="output" id="total"></span></td>
</tr>
<tr>
<td>Total interest:</td>
<td>lt;span class="output" id="totalinterest"></span></td>
</tr>
<tr>
<th>Sponsors:</th>
<td colspan="2">Apply for you with one of these fine lenders<div id="lenders"></div></td>
</tr>
</table>
</div>
</div>
</body>
<script>
"use strict"
//----[计算金额]----
function calcuate(){
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);
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);
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){
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(principal,interest,monthly,payments) {
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 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(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.stroke();
g.fillStyle = "black";
g.fill();
g.fillText("Loan Black",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>

复制代码

流觞 · 发表于 2018-1-5 16:39:29

顶一下

账号		自动登录	找回密码
密码			注册账号

[JS] 一个JavaScript贷款计算器

【江湖新秀】

【我是小土豪】

【宝剑回鞘】

【泰拉达人】

【奥运选手】