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

来源：互联网发布：linux如何查看内网ip 编辑：程序博客网时间：2024/06/10 07:36
<!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>                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 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>
示例图片如下：
这里写图片描述
源码下载地址：js 贷款计算器源码下载地址
0 0
使用 js 实现 贷款计算器功能

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