1.2拓展--js贷款计算器

最新推荐文章于 2022-01-06 17:45:03 发布
学习急先锋
最新推荐文章于 2022-01-06 17:45:03 发布
阅读量909
点赞数 1
分类专栏： JavaScript JavaScript学习指南学习笔记
本文链接：https://blog.csdn.net/myvanguard/article/details/53445379
版权
JavaScript 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
JavaScript学习指南学习笔记
5 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loan Calculator</title>
<style>
.output{
    font-weight: bold;/*计算结果为粗体*/
}
#payment{
    text-decoration: underline;/*定义id=payment的元素样式*/
}
#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>
        <td>Approximate Payments</td>
        <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 rowspan="2">Apply for your loan width 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");

    //假设输入的数据都是合法的,将百分比格式转化为小数格式
    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)){
        //将数据填充到输出字段的位置,四舍五入保留2位小数
        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){
            console.log(e);
        }

        //使用图表展示贷款余额
        chart(principal,interest,monthly,payments);
    }else{
        //计算结果出错清空以前的输入数据
        payment.innerHTML="";
        total.innerHTML="";
        totalinterest.innerHTML="";
        chart();//不传参代表清空图表
    }
}
//将用户的输入保存到localStorage对象的属性当中 下次访问会保留到原始位置
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;
    }
    //将用户输入的数据进行URL编码
    var url="getLenders.php"+
    "?amt="+encodeURIComponent(amount)+
        "&apr="+encodeURIComponent(apr)+
        "&yrs="+encodeURIComponent(years)+
        "&zip="+encodeURIComponent(zipcode);

    //通过XMLHttpRequest()对象来取返回数据
    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);//解析为JS数组
            var list="";
            for(var i=0;i<lenders.length;i++){
                list+="<li><a href='"+lenders[i].url+"'>"+lenders[i].name+"</a></li>";
            }
            ad.innerHTML="<ul>"+list+"</ul>";
        }
    }
}
//使用canvas元素展示月度贷款余额,利息,资产收益
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;
    var height=graph.height;
    //将付款数字和美元数据转换为像素
    function paymentToX(n){
        return n*width/payments;
    }
    function amountToY(a){
        return height-(a*height/(monthly*payments*1.05));
    }
    //付款数据是一条从(0,0)到(payments,monthly*payments)的直线
    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 m=(principal-equity)*interest;
        equity+=(monthly-m);//得到资产总额
        g.lineTo(paymentToX(p),amountToY(equity));//将数据绘制到画布上
    }
    g.lineTo(paymentToX(payments),amountToY(0));//将数据线绘制到x轴
    g.closePath();//线条首尾相连
    g.fillStyle='green';//开始绿色绘制图形
    g.fill();//曲线之下填充
    g.font="bold 12px sans-serif";
    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 m=bal*interest;
        bal-=(monthly-m);//得到资产额
        g.lineTo(paymentToX(p),amountToY(bal));//将直线连接到某点
    }
    g.lineWidth=1;//线宽加粗
    g.stroke();//绘制余额曲线
    g.fillStyle="black";//使用黑色字体
    g.fillText("Loan Balance",20,50);//图例文字
    //将年度数据在X轴做标记
    g.textAlign="center";//文字居中对象
    var y=amountToY(0);//Y坐标设为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){//每5年的数据
            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>
</body>
</html>