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

Posted 白羽流光

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript权威指南----一个JavaScript贷款计算器相关的知识,希望对你有一定的参考价值。

废话不多说上例子代码:

 

  1 <!DOCTYPE html>
  2 <html>
  3  
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>javascript Loan Calculator</title>
  7         <style>
  8             .output{font-weight: bold;}
  9             #payment{text-decoration: underline;}
 10             #graph{border: 1px solid black;}
 11             th, td{vertical-align: top;}
 12  
 13         </style>
 14     </head>
 15  
 16     <body>
 17         <table>
 18             <tr>
 19                 <th>Enter Loan Data:</th>
 20                 <td></td>
 21                 <th>Loan Balance,Cumulative Equity,and Interest Payments</th>
 22             </tr>
 23             <tr>
 24                 <td>Amount of the loan($):</td>
 25                 <td><input id="amount" οnchange="calculate();"/></td>
 26                 <!--数量-->
 27                 <td rowspan="8"><canvas id="graph" width="400" height="250"></canvas></td>
 28                 <!--图表-->
 29             </tr>
 30             <tr>
 31                 <td>Annual interest(%):</td>
 32                 <td><input id="apr" οnchange="calculate();" /></td>
 33                 <!--年百分利率-->
 34             </tr>
 35             <tr>
 36                 <td>Repayment period (years):</td>
 37                 <td><input id="years" οnchange="calculate();" /></td>
 38             </tr>
 39             <tr>
 40                 <td>Zipcode (to find lenders):</td>
 41                 <td><input id="zipcode" οnchange="calculate();" /></td>
 42                 <!--邮政编码-->
 43             </tr>
 44             <tr>
 45                 <td>Approximate Payments:</td>
 46                 <td><button id="years" onclick="calculate();">Calculate</button></td>
 47                 <!--计算-->
 48             </tr>
 49             <tr>
 50                 <td>Monthly payment:</td>
 51                 <td>$<span class="output" id="payment"></span></td>
 52                 <!--付款-->
 53             </tr>
 54             <tr>
 55                 <td>Total interest:</td>
 56                 <td>$<span class="output" id="total"></span></td>
 57                 <!--全部的-->
 58             </tr>
 59             <tr>
 60                 <td>Total payment:</td>
 61                 <td>$<span class="output" id="totalinterest"></span></td>
 62                 <!--总利息-->
 63             </tr>
 64             <tr>
 65                 <th>Spinsors:</th>
 66                 <td colspan="2">
 67                     Apply for your loan with one of these fine lenders:
 68                     <div id="lenders"></div>
 69                     <!--贷款人-->
 70                 </td>
 71             </tr>
 72         </table>
 73         <script>
 74             //"use strict";
 75             function calculate(){
 76                 //查找文档中用于输入输出的元素
 77                 var amount = document.getElementById("amount");
 78                 var apr = document.getElementById("apr");
 79                 var years = document.getElementById("years");
 80                 var zipcode = document.getElementById("zipcode");
 81                 var payment = document.getElementById("payment");
 82                 var total = document.getElementById("total");
 83                 var totalinterest = document.getElementById("totalinterest");
 84                 
 85                 //假如所有的输入都是合法的,将从input中获取输入数据
 86                 //将百分比格式转换成小数格式,并从年利率转化成月利率
 87                 //将年度赔付装换成月度赔付
 88                 var principal = parseFloat(amount.value);
 89                 var interest = parseFloat(apr.value)/100/12;
 90                 var payments = parseFloat(years.value)*12;
 91                 
 92                 //现在计算月度赔付的数据
 93                 var x =Math.pow(1+interest,payments);//Math.pow()进行幂次运算
 94                 var monthly = (principal*x*interest)/(x-1);
 95                 
 96                 //如果结果没有超过js能表示的数字范围,且用户的输入也正确
 97                 //这里所展示的结果就是合法的
 98                 if(isFinite(monthly)){
 99                     //将数字填充到输出字段的位置,四舍五入到小数点后两位数字
100                     payment.innerHTML = monthly.toFixed(2);
101                     total.innerHTML = ((monthly*payments)-principal).toFixed(2);
102                     totalinterest.innerHTML=((monthly*payments)-principal).toFixed(2);
103                     
104                     //将用户输入的数据保存下来,这样下次访问时候也能取到数据
105                     save(amount.value,apr.value,years.value,zipcode.value);
106                     
107                     //找到并展示放贷人,但忽略网络错误
108                     try{
109                         //捕获这段代码抛出的所有异常
110                         getLenders(amount.value,apr.value,years.value,zipcode.value);
111                     }
112                     //忽略这些异常
113                     catch(e){}
114                     
115                     //最后,用图表展示贷款余额,利息和资产收益
116                     chart(principal,interest,monthly,payments);
117                 }else{
118                     payment.innerHTML="";
119                     total.innerHTML="";
120                     totalinterest.innerHTML="";
121                     chart();
122                 }
123             }
124             
125             function save(amount,apr,years,zipcode){
126                 if(window.localStorage){//只有在浏览器支持的时候才支持这里的代码
127                     localStorage.loan_amount = amount;
128                     localStorage.loan_apr = apr;
129                     localStorage.loan_years = years;
130                     localStorage.loan_zipcode = zipcode;
131                 }
132             }
133             
134             //文档首次加载的时候,将会尝试还原输入字段
135             window.οnlοad=function(){
136                 //如果浏览器支持本地存储并且上次保存的值是存在的
137                 if(window.localStorage && localStorage.loan_amount){
138                     document.getElementById("amount").value = localStorage.loan_amount;
139                     document.getElementById("apr").value = localStorage.loan_apr;
140                     document.getElementById("years").value = localStorage.loan_years;
141                     document.getElementById("zipcode").value = localStorage.loan_zipcode;
142                 }
143             }
144             
145             //将用户的输入发送到服务器端脚本返回一个本地放贷人的连接列表,在这个例子中并没有是现在这种查找放贷人的服务
146             //但如果该服务存在,该函数会使用它
147             function getLenders(amount,apr,years,zipcode){
148                 //如果浏览器不支持XMLHttpRequest对象,则退出
149                 if (!window.XMLHttpRequest)return;
150                 
151                 //找到要显示放贷人列表的元素
152                 var ad=document.getElementById("lenders");
153                 if(!ad)return;//如果返回为空则退出
154                 
155                 //将用户的输入数据进行url编码,并作为查询参数附加在URL里
156                 var url = "getLenders.php"+
157                 "?amt" + encodeURLComponent(amount)+
158                 "?apr" + encodeURLComponent(apr)+
159                 "?yrs" + encodeURLComponent(years)+
160                 "?zip" + encodeURLComponent(zipcode);
161                 
162                 //用XMLHttpRequest对象来提取返回数据
163                 var req = new XMLHttpRequest();//发送一个新的请求
164                 req.open("GET",url);//通过url发起一个http get请求
165                 req.send(null);//不带任何正文发送这个请求
166                 
167                 //在返回数据之前,注册一个事件处理函数,这个处理函数将会在服务器的的响应返回至客户端的时候调用
168                 //这个异步边城模型在客户端js中是非常常见的
169                 req.onreadystatechange = function(){
170                     if(req.readyState == 4 《JavaScript权威指南》读书笔记

《JavaScript权威指南》读书笔记

JavaScript权威指南 - 函数

深入了解JavaScript权威指南

JavaScript权威指南手记

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