js 贷款计算器

时间:2020-04-25
本文章向大家介绍js 贷款计算器,主要包括js 贷款计算器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贷款计算器</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>
            <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>Annul interset (%):</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>
            <td>Approximate Payments:</td>
            <td><button onchange="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="total" id="total"></span></td>
        </tr>
        <tr>
            <td>Total interset:</td>
            <td>$<span class="output" id="totalinterset"></span></td>
        </tr>
        <tr><th>Sponsors:</th><td colspan="2">Apply for you loan with one of these fine lenders:
            <div id="lenders"></div>
        </td></tr>
    </table>
</body>
<script>
    "use strict"; //如果浏览器支持,则开启ECMAScript 5 的严格模式
    function calculate(){
        console.log(3);
        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 totalinterset = document.getElementById("totalinterset");
        
        //将年度转换为月度赔付数据
        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);
            totalinterset.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 = "";
            totalinterset.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 = "getLenders.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,interset,monthly,payments){
            console.log(0);
            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 Interset Payments",20,20);

            var equity = 0;
            g.beginPath();
            g.moveTo(paymentToX(0),amountToY(0));
            for(var p = 1; p <= payments ; p++ ){
                var thisMothsInterest = (principal - equity) *interset;
                equity += (monthly - thisMothsInterest);
                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 thisMothsInterest = bal * interset;
                bal -= (monthly - thisMothsInterest);
                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>
</html>

原文地址:https://www.cnblogs.com/ikai/p/12774269.html