一个简单的税利计算器（网页版）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个简单的税利计算器（网页版）相关的知识，希望对你有一定的参考价值。
嗯嗯，做一个简单的网页版的税率计算器，功能比较简单，但是相对比较实用。因为参考了一些其他作品，所以在计算汇率的时候习惯性的是以美元做单位。具体的功能有着较为详细的标注。仅供大家学习参考下。
<!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中引用了不少算法，如果阅读起来有些困难，请先从基本的数学计算开始看起。
以上是关于一个简单的税利计算器（网页版）的主要内容，如果未能解决你的问题，请参考以下文章