1.2拓展--js贷款计算器

来源：互联网发布：淘宝天天特价男装编辑：程序博客网时间：2024/06/10 04:20
<!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>
效果图
1 0