-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy path122.html
261 lines (227 loc) · 7.27 KB
/
122.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
.output{font-weight: bold;}
#payment{text-decoration: underline;}
#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="400px" height="250px" ></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>
<th>Approximate Paments:</th>
<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>Sponosors:</th>
<td colspan="2">Apply for your loan with one of these fine lenders:<div id="lenders"></div></td>
</tr>
</table>
<script type="text/javascript">
"using 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');
// function getname(name){
// return document.getElementById(name);
// };
// var amount=getname('amount');
// var apr=getname('apr');
// var years=getname('years');
// var zipcode=getname('zipcode');
// var payment=getname('payment');
// function getname1(va,name){
// var va=document.getElementById(name);
// };
// getname1(amount,'amount');
// getname1(amount,'amount');
// getname1(amount,'amount');
// getname1(amount,'amount');
// getname1(amount,'amount');
var principal=parseFloat(amount.value); //从input获取数据
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);
if(isFinite(monthly)){
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){
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 getlengder(amount,apr,years,zipcode){
if(!window.XMLHttpRequest) return;
var ad=document.getElementById('lenders');
if(!ad) return;
var url="getLenders.php"+"&amt="+encodeURLCmponent(amount)+"&apr"+encodeURLCmponent(apr)+"&yrs"+encodeURLCmponent(years)+"&zip"+encodeURLCmponent(zipcode);
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);
var list="";
for(var i=0;i<lenders.length;i++){
list+="<li><a href='"+lenders[i].url+"'>"+lenders[i].name+"</a>";
}
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;
//获得画布元素的对象，这个对象定义了一组绘画的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*payment*1.05))
}
// 付款信息是一条从(0,0)到(payment,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.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)
//将年度在y轴上做标记
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,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>