使用 js 实现贷款计算器功能

2024-04-27 15:11:39

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <table> <tr> <th>Enter Loan Data:</th> <td></td> <th>Loan Balance, Interest Payments</th> </tr> <tr> <td>Amount of Loan ($):</td> <td><input id="amount" onchange="calculate()"/></td> <td rowspan=8> <canvas id='graph' width=400 height=250></canvas> </td> </tr> <tr> <td> Annual interest(%): </td> <td><input id='aPR' onchange="calculate()"/></td> </tr> <tr> <td> Repayments period(years): </td> <td><input id='years' onchange="calculate()"/></td> </tr>  <tr> <td> Approximate payments: </td> <td><button onclick="calculate()">Calculate</button></td> </tr> <tr> <td> Monthly payment: </td> <td>$<span id="payment"></span></td> </tr> <tr> <td> Total payment: </td> <td>$<span id="total"></span></td> </tr> <tr> <td> Total interest: </td> <td>$<span id="totalinterest"></span></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <th> Sponsors: </th> <td colspan=2>Apply for your loan with one of these fine lenders: <div id="lenders"></div> </td> </tr> </table> <script> 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); save(amount.value, apr.value, years.value, ''); // 借贷人省略 // 画图 chart(principle, 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(principle, interest, monthly, payments){ var graph = document.getElementById('graph'); graph.width = graph.width; if(!graph.getContext) return; var g = graph.getContext('2d'); var width = graph.width; var 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 '微软雅黑'"; //g.fillStyle = "yellow"; 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 = (principle - equity) * interest; equity += (monthly - thisMonthsInterest); g.lineTo(paymentToX(p), amountToY(equity)); } g.lineTo(paymentToX(payments), amountToY(0)); g.fillStyle = 'green'; g.fill(); g.fillText('Total Equity', 20, 35); //画余额 var bal = principle; 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.fillStyle='black'; g.stroke(); g.fillText("Loan Balance", 20, 50); //将年度数据在X轴做标记 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, principle]; 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>

示例图片如下：这里写图片描述