JavaScript贷款计算器

最新推荐文章于 2023-11-08 13:12:18 发布

xiu52t

最新推荐文章于 2023-11-08 13:12:18 发布

阅读量850

点赞数

分类专栏： WEB前端

WEB前端专栏收录该内容

8 篇文章

订阅专栏

这是一个使用JavaScript实现的贷款计算器示例，可以计算月供、总支付额和总利息，并通过图表展示贷款余额、累计权益和利息支付情况。此外还提供了一个根据邮政编码查找贷款机构的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript贷款计算器

代码块

本例是基于犀牛书第一章的JavaScript贷款计算器的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Loan Calculator</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>
        <td></td>
        <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>Annual interest(%):</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><th>Approximate Payment:</th>
        <td><button onclick="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="output"id="total"></span></td></tr>
    <tr><td>Total interest:</td>
        <td>$<span class="output"id="totalinterest"></span></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>
    <script>"use strict";
        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");

            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);

                try{
                    getLenders(amount.value,apr.value,years.value,zipcode.value);
                }
                catch (e){}

                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 getLenders(amount,apr,years,zipcode){
            if(!window.XMLHttpRequest)return;

            var ad=document.getElementById("lenders");
            if(!ad)return;

            var url="getLender.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,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.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>
</table>
</body>
</html>