用js实现贷款利率的计算与可视化

最新推荐文章于 2024-03-23 16:31:11 发布

COW码

最新推荐文章于 2024-03-23 16:31:11 发布

阅读量443

点赞数 1

文章标签： html5 js

本文链接：https://blog.csdn.net/MCprogramme/article/details/120827072

版权

<style>
        .result{font-weight:bold;}
        .output { font-weight: bold; }           
        #payment { text-decoration: underline; } 
        #graph { border: solid black 1px; }    
        th, td { vertical-align: top; }    
</style>
<body>
    <table>
        <tr>
            <th>贷款信息:</th>
            <td></td>
            <th>Loan Balance, Cumulative Equity, and Interest Payments</th>
        </tr>
        <tr>
            <td>Amount of the loan ($):</td>
            <td><input name="amount" ></td>
            <td rowspan=8>
                <canvas id="graph" width="400" height="250"></canvas>
            </td>
        </tr>
        <tr>
            <td>Annual interest (%):</td>
            <td><input name="apr" onchange="calculate()"></td>
        </tr>
        <tr>
            <td>Repayment period (years):</td>
            <td><input name="years" onchange="calculate()"></td>
        <tr>
            <td>邮政编码 (to find lenders):</td>
            <td><input name="zipcode" onchange="calculate()"></td>
        <tr>
            <th>Approximate Payments:</th>
            <td><button class="approximate">Calculate</button></td>
        </tr>
        <tr>
            <td>Monthly payment:</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 class="lenders"></div>
            </td>
        </tr>
    </table>
</body>
<script>
    "user strict"
    let approximate =document.querySelector(".approximate");
    approximate.addEventListener("click",calculate);
    function calculate(){
        console.log("hello");
        let amount = document.querySelector("[name='amount']");
        let apr = document.querySelector("[name='apr']");
        let years = document.querySelector("[name='years']");
        let payment = document.querySelector("#payment");
        let total = document.querySelector("#total");
        let totalinterest = document.querySelector("#totalinterest");
        let price = parseFloat(amount.value);
        let interest = parseFloat(apr.value)/100/12;
        let payments = parseFloat(years.value)*12;
        let x = Math.pow(1+interest,payments);
        let mountly = (price*x*interest)/(x-1);

        let zipcode = document.querySelector("[name='zipcode']");
        if (isFinite(mountly)) {
            payment.innerHTML = mountly.toFixed(2);
            total.innerHTML = (mountly * payments).toFixed(2);
            totalinterest.innerHTML = (mountly * payments - price).toFixed(2);
            save(amount.value, apr.value, years.value, zipcode.value);
            try {

            }
            catch {

            }
            chart(price, interest, mountly, payments)
        }else{
            payment.innerHTML = "";
            total.innerHTML = "";
            totalinterest.innerHTML="";
            chart();
        };
       function chart(price,interest,mountly,payments){
            let  graph = document.getElementById("graph");
            graph.width = graph.width;
            
            if(arguments.length==0||!graph.getContext("2d")) return Error;

            let g = graph.getContext("2d");
            
            let width = graph.width,height=graph.height;
            function paymentsToX(n){
                return n*width/payments;
            };
            function paymentsToY(a){
                return height-(a*height/(mountly*payments*1.05));
            };
            g.moveTo(paymentsToX(0),paymentsToY(0));
            g.lineTo(paymentsToX(payments),paymentsToY(mountly*payments));
            g.lineTo(paymentsToX(payments),paymentsToY(0));
            g.closePath();
            g.fillStyle = "#f88";
            g.fill();
            g.font = "bold 12px  sans-serif";
            g.fillText("total interest payments",20,20);
            
            let equit = 0;
            g.closePath();
            g.moveTo(paymentsToX(0),paymentsToY(0));
            for(let i=0;i<payments;i++){
                let thisMonthlyinterest = (price-equit)*interest;
                equit+=(mountly-thisMonthlyinterest);
                g.lineTo(paymentsToX(i),paymentsToY(equit)); 
            };
            g.lineTo(paymentsToX(payments),paymentsToY(0));
            g.closePath();
            g.fillStyle="green";
            g.fill();
            g.fillText("total equit",20,35);

            let pri = price;
            g.beginPath();
            g.moveTo(paymentsToX(0),paymentsToY(pri));
            for(let i=0;i<payments;i++){
                let thisMonthinterest = pri*interest;
             pri-=(mountly-thisMonthinterest);
                g.lineTo(paymentsToX(i),paymentsToY(pri));
            };
            g.lineWidth=3;
            g.stroke();
            g.fillStyle="black";
            g.fillText("lone balance",20,50);

            g.textAlign = "center";

            let y= paymentsToY(0);

            for(let j=0;j*12<=payments;j++){
                let x = paymentsToX(j*12);
                g.fillRect(x-0.5,y-3,1,3);
                if(j==1)g.fillText("Year",x,y-5);
                if(j%5 ==  0&& j*12 !== payments){
                    g.fillText(String(j),x,y-5);
                };
            };
        };

    };
</script>

学习学的很长时间没更了，在这分享的例子有很多不完善的地方，只是用来和大家一起学习用的,后我还会继续分享各种好的js例子，当然有愿意的也可以分享给大家，大家一起学习。下面的是效最终效果图。当然这里用到了canvas就是这里的计算有点东西其他的只需要记住作用就行了。

COW码

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用js实现贷款利率的计算与可视化

<style> .result{font-weight:bold;} .output { font-weight: bold; } #payment { text-decoration: underline; } #graph { border: solid black 1px; } th, td { vertical-align: top; } </style>.
复制链接

扫一扫