用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>
<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就是这里的计算有点东西其他的只需要记住作用就行了。

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
蚁群聚类算法是一种启发式算法,模拟了蚂蚁在寻找食物时的行为。它主要用于解决聚类问题,可以将数据集分成多个类别,并生成可视化结果。 下面是使用蚁群聚类算法进行数据聚类与可视化的步骤: 1. 初始化蚂蚁和信息素:首先,初始化一些蚂蚁,并随机分配到数据集中的不同数据点上。然后,为每个数据点初始化一个信息素值,表示该点与其他点之间的相关性。 2. 计算相似度:根据数据点之间的距离计算相似度矩阵。可以使用欧氏距离、曼哈顿距离或其他距离度量方法。 3. 蚂蚁移动:每只蚂蚁根据一定的规则选择下一个要移动的数据点,并更新信息素。规则可以是基于信息素浓度、相似度和先前访问过的数据点等因素的加权综合。 4. 更新信息素:当所有蚂蚁完成移动后,根据蚂蚁的路径更新信息素矩阵。可以使用一些公式来计算信息素的更新量,例如Ant System算法中的公式。 5. 聚类结果:根据信息素矩阵,将数据点分配到不同的类别中。可以根据信息素浓度或其他指标来确定类别。 6. 可视化:最后,将聚类结果可视化。可以使用散点图或其他图表来展示不同类别的数据点的分布情况。 需要注意的是,蚁群聚类算法是一种启发式算法,其结果可能受到参数设置和随机性的影响。因此,在实际应用中,可能需要进行多次实验并选择最优的结果。 希望以上内容对你有帮助!如果你还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值