嗯嗯，做一个简单的网页版的税率计算器，功能比较简单，但是相对比较实用。因为参考了一些其他作品，所以在计算汇率的时候习惯性的是以美元做单位。具体的功能有着较为详细的标注。仅供大家学习参考下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JavaScript Loan Calculator</title>
<style>
/*这是一个css样式列表：定义输出程序的样式*/
.output{ font-weight: bold; } /* 计算结果显示为粗体*/
#payment{text-decoration: underline;} /* 定义id=“payment”的样式 */
#graph{border:groove silver 1px;} /* 设置表格的边框样式*/
th, td{vertical-align: top;} /* 表格单元格顶端对齐方式向上对齐*/
table{ margin:50px auto; border:groove grey 1px;background:rgba(0,0,0,0.2);}
</style>
</head>
<body>
<!--这是一个html表格，其中包含<input>元素可以用来输入数据
程序将在<span>元素中显示计算结果，这些元素都有类似“insert”和“year”的id
这些id将在表格下面的JavaScript代码中用到。我们注意到，有一些
input元素定义了“onchange”或“onclick”的事件处理程序，以便用户在输入数据或或者点击inputs时
执行指定的JavaScript代码段-->
<table>
<tr><th>输入贷款数据:</th>
<td></td><th>Loan Balance,Cumulative Equity, and Insert Payments</th>
</tr>
<tr><td>贷款金额($):</td>
<td><input id="amount" onchange="calculate();"></td>
<td rowspan="8"><canvas id="graph" width="400" height="250"></canvas></td></tr>
<tr><td>年利率(%):</td>
<td><input id="apr" onchange="calculate();"></td></tr>
<tr><td>偿还期限(年):</td>
<td><input id="years" onchange="calculate();"></td></tr>
<tr><td>邮政编码(to find lenders :)</td>
<td><input id="zipcode" onchange="calculate();"></td></tr>
<tr><td>近似支付:</td>
<td><button onclick="calculate();">Calculate</button></td></tr>
<tr><td>按月支付:</td>
<td>$<span class="output" id="payment"></span></td></tr>
<tr><td>总付款:</td>
<td>$<span class="output" id="total"></span></td></tr>
<tr><td>总利息:</td>
<td>$<span class="output" id="totalintersert"></span></td></tr>
<tr><th>赞助商:</th>
<td colspan="2">Apply for your loan with one of these fine lenders:
<div id="lender"></div></td></tr>
</table>
<script>
function calculate(){
//通过获取id查找文档中用于输出的元素
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 totalinsert=document.getElementById("totalinsert");
//假设所有的输入都是合法的，将从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);
//如果数字没有超过JavaScript表示的数字范围，而且用户输入的也正确
//这里所展示的结果就是合法的
if(isFinite(monthly)){
//将数据填充只输出字段的位置，四舍五入到小数点后两位
payment.innerHTML=monthly.toFixed(2);
//将用户的输入数据保存下来，这样在下次访问时也能取到数据
save(amount.value, apr.value, years.value, zipcode.value);
//找到并展示本地放贷人，但忽略网络错误
try{//捕获这段代码抛出的异常
getListener(amount.value, apr.value, years.value , zipcode.value);
}catch(e){/*忽略这些异常*/}
//最后，用图表展示贷款余额，利息和资产收益、
chart(principal,interest,monthly,payments);
}else{
//计算结果不是数字或者无穷大，意味着输的的数据是非法的或者是不完整的
//晴空之前的数据
payment.innerHTML="";
total.innerHTML="";
totalinsert.innerHTML=""; //清空文本内容
chart(); //给定空的参数
}
}
//将用户的输入保存至localStorage对象的属性中
//这些属性在再次访问时还会继续保持在原来的位置
//如果你在浏览器中必学按照file://URL的方式打开本地文件，
//择无法再某些浏览器中使用存储功能（Firefox）
//通过http打开文件是可行的
function save(amount,apr,years,zipcode){
if(window.localStorage){
//只有在浏览器支持的时候才运行这段代码
localStorage.loan_amount=amount;
localStorage.loan_apr=apr;
localStorage.loan_years=years;
localStorage.local_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){
//如果浏览器不支持XML HTTP Ruquest对象，则退出
if(!window.XMLHttpRequest)return;
//找到要显示放贷人的列表元素
var ad=document.getElementById("lenders");
if (!ad)return; //如果返回为空，则退出
//将用户输入的数据进行URL编码并作为查询参数附加在URL里面
var url="getLenders.php"+ //处理数据的URL地址
"?amt="+encodeURIComponent(amount)+ //使用查询串中的数据
"&apr="+encodeURIComponent(apr)+
"&yrs="+encodeURIComponent(years)+
"$zip="+encodeURIComponent(zipcode);
//通过XMLHTTPRuquest对象来提取返回数据
var req=new XMLHttpRequest(); //发起一个新的请求
req.open("GET",url); //通过URL发送一个get请求
req.send(null); //不带任何正文发送这个请求
//在返回数据之前，注册了一个事件处理函数，处理这个函数
//将会在服务器的响应返回至客户端的时候调用
//这种异步编程模型在客户端JavaScript中是非常常见的
req.onreadystatechange= function(){
if(req.status==200 && req.readyState==4){
//代码运行到这里，说明我们得到了一个完整且合法的HTTP响应
var response=req.responseText; //HTTP响应是以字符串的形式呈现的
var lenders=JSON.parse(response); //将其解析为js数组
//将数组中的放贷人对象转换为HTNL字符串形式
var list="";
for(var i=0; i<lenders.length;i++){
list+="<li><a href=‘"+lenders[i].url+"‘>"+lenders[i].name+"</a>";
}
//将元素在html中呈现出来
ad.innerHTML="<ul>"+list+"</ul>";
}
}
}
//在HTML<canvas>中用图表展示月度贷款余额，利息和资产收益
//如果不传入参数的话。则清空之前图表的数据
function chart(principal,intersert,monthly,payments){
var graph=document.getElementById("graph"); //得到<canvas>标签
graph.width=graph.width; //用一种巧妙的手法清除并重布置画布
//如果不传入参数或者浏览器不支持画布，则直接返回。
if(argnames.length==0 || !graph.getContext)return;
//获得画布元素的“context”对象，这个对象定义了一组绘画API
var g=graph.getContent("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 Inerest Pyanments",20,20) ; //将文字绘制到图例中
//很多资产数据并不是线性的，很那将其反应至图表中
var equity= 0;
g.beginPath();
g.moveTo(paymentTox(0),amountToy(0));
for(var p=1; p<=payments; p++){
//计算出每一笔赔付的利息
var thisMnothsInterest=(principal-equity)*intersert;
equity +=(monthly -thisMonthsInsterest); //得到资产额
g.lineTo(paymentTox(p),amountToy(equity)); //将数据绘制到画布上
}
g.lineTo(paymentTox(payments),amountToy(0)); //将数据绘制至X轴
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 thisMonthsInterset =ball*interest;
bal-=(monthly-thisMonthsInterset); //得到资产额
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];
for(var i=0; i<ticks.length;i++){
var y=amountToy(ticks[i]);
g.fillRect(rightEde-3,y-0.5,3,1);
g.fillText(String(ticks[i].toFixed(0)),rightEdge-5,y);
}
}
}
</script>
</body>
</html>
这个计算器样式较为简单，实用方便。对于这个计算器的样式本人偷懒并没有进行美化，有心的可以自行在style里面添加所有你所需要的样式。
这个计算器的难点在于JavaScript中引用了不少算法，如果阅读起来有些困难，请先从基本的数学计算开始看起。
时间： 2024-10-22 18:50:43