<!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.2拓展--js贷款计算器
最新推荐文章于 2022-01-06 17:45:03 发布