当前位置 博文首页 > Jet_Lover的博客:一个JavaScript实现的贷款计算器
基于JavaScript实现的贷款计算器
本文实现的技术:
先看成果
HTML部分
<table id="myTable">
<tr>
<th>输入贷款数据</th>
<td></td>
<th>贷款余额、累计权益和利息支付</th>
</tr>
<tr>
<td>贷款金额 ($):</td>
<td><input id="amount" onchange="calculate()"/></td>
<td rowspan=8>
<canvas id='graph' width=400 height=250></canvas>
</td>
</tr>
<tr>
<td>
年利息(%):
</td>
<td><input id='apr' onchange="calculate()"/></td>
</tr>
<tr>
<td>
还款期(年):
</td>
<td><input id='years' onchange="calculate()"/></td>
</tr>
<tr>
<td>
邮政编码(查找贷方):
</td>
<td><input id='zipcode' onchange="calculate()"/></td>
</tr>
<tr>
<td>
接近付款:
</td>
<td><button onclick="calculate()">计算</button></td>
</tr>
<tr>
<td>
每月付款:
</td>
<td>$<span class="output" id="payment"></span></td>
</tr>
<tr>
<td>
付款总额:
</td>
<td>$<span class="output" id="total"></span></td>
</tr>
<tr>
<td>
总利息:
</td>
<td>$<span class="output" id="totalinterest"></span></td>
</tr>
<tr>
<th>
赞助商:</th><td colspan=2>
向这些优秀的贷款人申请贷款:
<div id="lenders"></div>
</td>
</tr>
</table>
CSS部分
#myTable{
margin: auto; //居中
}
.output{
font-weight: bolder; //计算结果定义为粗体
}
#payment{
text-decoration: underline; //定义id为payment的元素样式
}
#graph{
border: solid black 1px; //图表有一个1像素的边框
}
th td{
vertical-align: top; //表格单元与其对齐方式为顶端对齐
}
JS部分
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);
// 借贷人,忽略网络错误
try{
getLenders(amount.value, apr.value, years.value, zipcode.value);
}
catch (e) {
//忽略异常
}
// 画图
chart(principle, interest, monthly, payments);
}else{
//计算结果不是数字或者无穷大,意味着输入数据是非法或不完整的
//清空数据
payment.innerHTML = "";
total.innerHTML = "";
totalinterest.innerHTML = "";
chart();
}
}
//将用户输入保存至localSorage对象的属性中
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) {
//如果浏览器不支持XMLHttpRequest对象,则退出
if(!window.XMLHttpRequest) return;
//找到要显示放贷人列表的元素
var ad =document.getElementById("lenders");
if(!ad) return; //如果为空则退出
//将用户的输入数据进行URL编码,并将查询参数附加在URL里
var url ="getLenders.php" + //处理数据的URL地址
"?amt="+