JavaScript权威指南----一个JavaScript贷款计算器

废话不多说上例子代码:

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>JavaScript Loan Calculator</title>

         <style>

             .output{font-weight: bold;}

             #payment{text-decoration: underline;}

             #graph{border: 1px solid black;}

             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" οnchange="calculate();"/></td>

                 <!--数量-->

                 <td rowspan="8"><canvas id="graph" width="400" height="250"></canvas></td>

                 <!--图表-->

             </tr>

             <tr>

                 <td>Annual interest(%):</td>

                 <td><input id="apr" οnchange="calculate();" /></td>

                 <!--年百分利率-->

             </tr>

             <tr>

                 <td>Repayment period (years):</td>

                 <td><input id="years" οnchange="calculate();" /></td>

             </tr>

             <tr>

                 <td>Zipcode (to find lenders):</td>

                 <td><input id="zipcode" οnchange="calculate();" /></td>

                 <!--邮政编码-->

             </tr>

             <tr>

                 <td>Approximate Payments:</td>

                 <td><button id="years" onclick="calculate();">Calculate</button></td>

                 <!--计算-->

             </tr>

             <tr>

                 <td>Monthly payment:</td>

                 <td>$<span class="output" id="payment"></span></td>

                 <!--付款-->

             </tr>

             <tr>

                 <td>Total interest:</td>

                 <td>$<span class="output" id="total"></span></td>

                 <!--全部的-->

             </tr>

             <tr>

                 <td>Total payment:</td>

                 <td>$<span class="output" id="totalinterest"></span></td>

                 <!--总利息-->

             </tr>

             <tr>

                 <th>Spinsors:</th>

                 <td colspan="2">

                     Apply for your loan with one of these fine lenders:

                     <div id="lenders"></div>

                     <!--贷款人-->

                 </td>

             </tr>

         </table>

         <script>

             //"use strict";

             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");

                 //假如所有的输入都是合法的，将从input中获取输入数据

                 //将百分比格式转换成小数格式，并从年利率转化成月利率

                 //将年度赔付装换成月度赔付

                 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);//Math.pow（）进行幂次运算

                 var monthly = (principal*x*interest)/(x-1);

                 //如果结果没有超过js能表示的数字范围，且用户的输入也正确

                 //这里所展示的结果就是合法的

                 if(isFinite(monthly)){

                     //将数字填充到输出字段的位置，四舍五入到小数点后两位数字

                     payment.innerHTML = monthly.toFixed(2);

                     total.innerHTML = ((monthly*payments)-principal).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){}

                     //最后，用图表展示贷款余额，利息和资产收益

                     chart(principal,interest,monthly,payments);

                 }else{

                     payment.innerHTML="";

                     total.innerHTML="";

                     totalinterest.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.οnlοad=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){

                 //如果浏览器不支持XMLHttpRequest对象，则退出

                 if (!window.XMLHttpRequest)return;

                 //找到要显示放贷人列表的元素

                 var ad=document.getElementById("lenders");

                 if(!ad)return;//如果返回为空则退出

                 //将用户的输入数据进行url编码，并作为查询参数附加在URL里

                 var url = "getLenders.php"+

                 "?amt" + encodeURLComponent(amount)+

                 "?apr" + encodeURLComponent(apr)+

                 "?yrs" + encodeURLComponent(years)+

                 "?zip" + encodeURLComponent(zipcode);

                 //用XMLHttpRequest对象来提取返回数据

                 var req = new XMLHttpRequest();//发送一个新的请求

                 req.open("GET",url);//通过url发起一个http get请求

                 req.send(null);//不带任何正文发送这个请求

                 //在返回数据之前，注册一个事件处理函数，这个处理函数将会在服务器的的响应返回至客户端的时候调用

                 //这个异步边城模型在客户端js中是非常常见的

                 req.onreadystatechange = function(){

                     if(req.readyState == 4 && req.status == 200){

                         //如果代码运行到这里，说明我们得到了一个合法且完整的http响应

                         var response = req.responseText;//http响应是以字符串的形式呈现的

                         var lenders = JSON.parse(response);//将其解析为js数组

                         //将数组中的放贷人对象转换成HTML字符串的形式

                         var list="";

                         for(var i=0;i<lenders.length;i++){

                             list += "<li><a href='"+ lenders[i].url +"'>"+lenders[i].name+"</a></li>"

                         }

                         //将数据在HTML中呈现出来

                         ad.innerHTML = "<ul>"+list+"</ul>";

                     }

                 }

             }

             //在HTML<canvas>元素中用图表展示月度贷款余额，利息和资产情况

             //如果不传参就清空之前的图表

             function chart(principal,interest,monthly,payments){

                 var graph = document.getElementById("graph");

                 graph.width = graph.width;//用一种巧妙的手法清除并重置画布

                 //如果不传入参数，或者浏览器不支持画布，则直接返回。

                 if(arguments.length == 0 || !graph.getContext)return;

                 //获得画布元素『context』对象，这个对象定义了一组绘画API

                 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));

                 }

                 //付款数据是一条从（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 thisMonthsINterest = (principal - equity)*interest;

                     equity += (monthly -thisMonthsInterest);

                     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 thisMonthsInterest = bal*interest;

                     bal-=(monthly - thisMonthsInterest);

                      g.lineTo(paymentToX(p),amountToY(bal));

                 }

                 g.lineWidth = 3;

                 g.stroke();

                 g.fillStyle ="black";

                 g.fillText("Loan Balance",20,50);

                 //将年度数据在X轴做标记

                 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>

     </body>

 </html>

这边例子有个我感觉错误的地方:

 <tr>

     <td>Approximate Payments:</td>

     <td><button id="years" onchange="calculate();">Calculate</button></td>

     <!--计算-->

 </tr>

这里的onchange是无法触发这个计算函数,需要改成onclick函数;

巴特西

JavaScript权威指南----一个JavaScript贷款计算器

最新文章

热门文章