一个JavaScript实现的贷款计算器

分手后的思念是犯贱 2022-08-09 02:08 243阅读 0赞

1.  基于JavaScript实现的贷款计算器：   
    
2.    
    
3.  <!DOCTYPE html**>**  
4.  **<****html****>**  
5.  **<****head****>**  
6.      **<****title****>**JavaScript Loan Calculator**</****title****>**  
7.      **<****style****>**  
8.          .output\{font-weight:bold;\}  
9.          \#payment\{text-decoration:underline;\}  
10.         \#graph\{border:solid black 1px;\}  
11.         th,td\{vertical-align:center;\}  
12.     **</****style****>**  
13.   
14. **</****head****>**  
15. **<****body****>**  
16.     **<****table****>**  
17.         **<****tr****>**  
18.             **<****th****>**Enter Loan Data:**</****th****>**  
19.             **<****td****>****</****td****>**  
20.             **<****th****>**Loan Balance,Cumulative Equity,and Interest Payments**</****th****>**  
21.         **</****tr****>**  
22.         **<****tr****>**  
23.             **<****td****>**Amount of the loan($):**</****td****>**  
24.             **<****td****>****<****input** id='amount' onchange='calculate();'**>****</****td****>**  
25.             **<****td** rowspan=8**>**  
26.                 **<****canvas** id='graph' width='470' height='250'**>****</****canvas****>**  
27.             **</****td****>**  
28.         **</****tr****>**  
29.          **<****tr****>**  
30.             **<****td****>**Annual interest(%):**</****td****>**  
31.             **<****td****>****<****input** id='apr' onchange='calculate();'**>****</****td****>**             
32.         **</****tr****>**  
33.          **<****tr****>**  
34.             **<****td****>**Repayment period(years):**</****td****>**  
35.             **<****td****>****<****input** id='years' onchange='calculate();'**>****</****td****>**             
36.         **</****tr****>**  
37.          **<****tr****>**  
38.             **<****td****>**Zipcode(to find lenders):**</****td****>**  
39.             **<****td****>****<****input** id='zipcode' onchange='calculate();'**>****</****td****>**             
40.         **</****tr****>**  
41.          **<****tr****>**  
42.             **<****td****>**Approximate Payments:**</****td****>**  
43.             **<****td****>****<****button** onclick='calculate();'**>**Calculate**</****button****>****</****td****>**             
44.         **</****tr****>**  
45.          **<****tr****>**  
46.             **<****td****>**Monthly Payments:**</****td****>**  
47.             **<****td****>**$**<****span** class='output' id='payment'**>****</****span****>****</****td****>**             
48.         **</****tr****>**  
49.          **<****tr****>**  
50.             **<****td****>**Total Payments:**</****td****>**  
51.             **<****td****>**$**<****span** class='output' id='total'**>****</****span****>****</****td****>**             
52.         **</****tr****>**  
53.          **<****tr****>**  
54.             **<****td****>**Total Interest:**</****td****>**  
55.             **<****td****>**$**<****span** class='output' id='totalinterest'**>****</****span****>****</****td****>**             
56.         **</****tr****>**  
57.          **<****tr****>**  
58.             **<****th****>**Sponsors:**</****th****>**  
59.             **<****td** colspan=2**>**  
60.                 Apply for your loan width one of these fine lenders:  
61.                 **<****div** id='lenders'**>****<****div****>**  
62.             **</****td****>**                
63.         **</****tr****>**  
64.     **</****table****>**  
65.     **<****script** type="text/javascript"**>**  
66.         "use strict";  
67.         function $(id)\{  
68.             return document.getElementById(id);  
69.         \}  
70.           
71.         function calculate ()\{  
72.             var amount = $('amount');  
73.             var apr = $('apr');  
74.             var years = $('years');  
75.             var zipcode = $('zipcode');  
76.             var payment = $('payment');  
77.             var total = $('total');  
78.             var totalinterest = $('totalinterest');  
79.              
80.             var principal = parseFloat(amount.value);  
81.             var interest = parseFloat(apr.value)/100/12;  
82.             var payments = parseFloat(years.value)\*12;  
83.             
84.             var x = Math.pow(1+interest ,payments);// power method.  
85.             var monthly = (principal \* x \* interest)/(x-1);  
86.               
87.             if(isFinite(monthly))\{  
88.                 payment.innerHTML = monthly.toFixed(2);  
89.                 total.innerHTML = (monthly\*payments).toFixed(2);  
90.                 totalinterest.innerHTML = ((monthly\*payments)-principal).toFixed(2);                  
91.                 save(amount.value,apr.value,years.value,zipcode.value);              
92.                 try\{  
93.                     getLenders(amount.value,apr.value,years.value,zipcode.value);  
94.                 \}catch(e)\{\}                  
95.                 chart(principal,interest,monthly,payments);   
96.             \}else\{                  
97.                 payment.innerHTML = "";  
98.                 total.innerHTML = "";  
99.                 totalinterest.innerHTML = "";  
100.                 chart();  
101.             \}  
102.         \}  
103.           
104.         function save(amount,apr,years,zipcode)\{  
105.             if(window.localStorage)\{  
106.                 localStorage.loan\_amount = amount;  
107.                 localStorage.loan\_apr = apr;  
108.                 localStorage.loan\_years = years;  
109.                 localStorage.loan\_zipcode = zipcode;  
110.             \}  
111.         \}  
112.           
113.         window.onload = function()\{  
114.             if(window.localStorage&&localStorage.loan\_amount)\{  
115.                 $('amount').value = localStorage.loan\_amount;  
116.                 $('apr').value = localStorage.loan\_apr;  
117.                 $('years').value = localStorage.loan\_years;  
118.                 $('zipcode').value = localStorage.loan\_zipcode;  
119.             \}  
120.         \}  
121.           
122.         function getLenders(amount,apr,years,zipcode)\{  
123.             if(!window.XMLHttpRequest)return ;              
124.             var ad = $('lenders');  
125.             if(!ad)return;  
126.               
127.             var url = 'getLenders.php' +   
128.                       '?amt='+ encodeURIComponent(amount)+  
129.                       '&apr='+ encodeURIComponent(apr)+  
130.                       '&yrs='+ encodeURIComponent(years)+  
131.                       '&zip='+ encodeURIComponent(zipcode);  
132.               
133.             var req = new XMLHttpRequest();  
134.             req.open('GET',url);  
135.             req.send(null);  
136.               
137.             req.onreadystatechange = function()\{  
138.                 if(req.readyState==4 && req.status == 200)\{  
139.                     var response = req.responseText;  
140.                     var lenders = JSON.parse(response);                      
141.                     var list = '';  
142.                     for(var i=0;i**<****lenders.length**;i++)\{  
143.                         list += '**<****li****>****<****a** href="' + lenders\[i\].url +'"**>**'+  
144.                                 lenders\[i\].name + '**</****a****>**';  
145.                     \}  
146.                     ad.innerHTML = 'ul' + list + 'ul';  
147.                 \}  
148.             \}  
149.         \}  
150.           
151.           
152.         function chart(principal,interest,monthly,payments)\{  
153.             var graph = $('graph');  
154.             graphgraph.width = graph.width;              
155.             if(arguments.length==0|| !graph.getContext)return ;  
156.               
157.             var g = graph.getContext('2d');  
158.             var width = graph.width,  
159.                 height = graph.height;  
160.                   
161.             function paymentToX(n)\{  
162.                 return n\*width/payments;  
163.             \}  
164.             function amountToY(a)\{  
165.                 return height - (a\*height/(monthly\*payments\*1.05));  
166.             \}  
167.               
168.             g.moveTo(paymentToX(0),amountToY(0));  
169.             g.lineTo(paymentToX(payments),amountToY(monthly\*payments));  
170.             g.lineTo(paymentToX(payments),amountToY(0));  
171.             g.closePath();  
172.               
173.             g.fillStyle = '\#f88';  
174.             g.fill();  
175.             g.font="bold 12px sans-serif";  
176.             g.fillText("Total Interest Payments",20,20);  
177.               
178.             var equity = 0;  
179.             g.beginPath();  
180.             g.moveTo(paymentToX(0),amountToY(0));  
181.             for(var  p=1;p**<**=payments;p++)\{  
182.                 var m = (principal - equity)\*interest;  
183.                 equity += (monthly - m);  
184.                 g.lineTo(paymentToX(p),amountToY(equity));  
185.             \}   
186.             g.lineTo(paymentToX(payments),amountToY(0));  
187.             g.closePath();  
188.             g.fillStyle = 'green';  
189.             g.fill();  
190.             g.font="bold 12px sans-serif";  
191.             g.fillText("Total Equity",20,35);  
192.               
193.               
194.             var bal = principal;  
195.             g.beginPath();  
196.             g.moveTo(paymentToX(0),amountToY(bal));  
197.             for(var  p=1;p**<**=payments;p++)\{  
198.                 var m = bal\*interest;  
199.                 bal \-= (monthly - m);  
200.                 g.lineTo(paymentToX(p),amountToY(bal));  
201.             \}   
202.             g.lineWidth = 1;  
203.             g.stroke();              
204.             g.fillStyle = 'black';  
205.             g.fillText("Total Balance",20,50);  
206.               
207.               
208.             g.textAlign = 'center';  
209.             var y = amountToY(0);  
210.             for(var year=1; year\*12**<**=payments;year++)\{  
211.                 var x = paymentToX(year\*12);  
212.                 g.fillRect(x-0.5,y-3,1,3);  
213.                 if(year==1) g.fillText("Year",x,y-5);  
214.                 if(year % 5 ==0 && year \*12 !== payments)\{  
215.                     g.fillText(String(year),x,y-5);  
216.                 \}  
217.             \}  
218.               
219.             g.textAlign = "right";  
220.             g.textBaseline = 'middle';  
221.             var ticks = \[ monthly \* payments ,principal\];  
222.             var rightEdge = paymentToX(payments);  
223.             for(var i=0;i**<****ticks.length**;i++)\{  
224.                 var y = amountToY(ticks\[i\]);  
225.                 g.fillRect(rightEdge-3,y-0.5,3,1);  
226.                 g.fillText(String(ticks\[i\].toFixed(0)),rightEdge-5,y);  
227.             \}  
228.         \}  
229.      
230.       
231.     **</****script****>**  
232. **</****body****>**  
233. **</****html****>**

**效果图：**

**![Center][]**

[Center]: /images/20220731/148ee58445c64e38936a2fba80a0c910.png