首页 > 代码库 > javascript的一个简易利率计算器+js图像显示 代码
javascript的一个简易利率计算器+js图像显示 代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS弹框</title> <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>输入数据:</th> <td></td> </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>数据压缩:</td> <td><input id="zipcode" onchange="calculate()" ></td> </tr> <tr> <td>计算汇率:</td> <td><button onclick="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>total interst:</td> <td>¥<span class="output" id="totalinterest"></span></td> </tr> <tr> <th>Sponsors:</th> <td colspan="2">生成你的利率: <div id="lenders"></div> </td> </tr> </table>
<script type="text/javascript"> "use strict";//如果浏览器支持的话,则开启ECMAScript5 的严格模式 /** * 这里的脚本定义了caculate()函数,在HTML代码只能怪绑定时间处理程序时会调用它 * 这个函数从<input>元素中读取数据,计算贷款赔付信息,并将结果显示在<span>元素中 * 同样,这里还保存了用户数据、展示了房贷人链接并绘制了图表 */ 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‘); /** * 假设所有的输入都是合法的,将从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); 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对象的属性中 * 这些属性在再次访问时还会继续保持在远位置 * 如果如果你在浏览器总欧冠按照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.loan_zipcode = zipcode; } } //在文档首次加载是,将会尝试还原输入字段 window.onload = function(){ //如果浏览器支持和本地存储并且上次保存的值是存在的 if(window.localStorage && localStorage.loan_amount){ document.getElementById(‘amount‘).value =http://www.mamicode.com/ localStorage.loan_amount; document.getElementById(‘apr‘).value =http://www.mamicode.com/ localStorage.loan_apr; document.getElementById(‘years‘).value =http://www.mamicode.com/ localStorage.loan_years; document.getElementById(‘zipcode‘).value =http://www.mamicode.com/ localStorage.loan_zipcode; } }; /** * 将用户的输入发送至服务器端脚本 * 将返回一个本地放贷人的链接列表,子啊这个例子中并没有实现这种查找放贷人的服务 * 但如果该服务存在,该函数会使用它 */ function getLenders(amount,apr,years,zipcode){ //如果浏览器不支持XMLHttpRequest对象,则退出 if(!window.XMLHttpRequest) returmn; var ad= document.getElementById(‘lenders‘); if(!ad) return ; //如果返回空,则退出 //将用户的输入数据进行URL编码,并作为查询参数附加在URL中 var url = "getLenders.php"+ //处理数据的URL地址 "?amt="+encodenURIComponent(amount)+ //使用查询串中的数据 ‘&apr=‘+encodenURIComponent(apr)+ ‘&yrs=‘+encodenURIComponent(years)+ ‘&zip=‘+encodenURIComponent(zipcode); //通过XMLHttpRequest对象来提取返回数据 var req = new XMLHttpRequest(); //发起一个新请求 req.open("GET",url); //通过URL发起一个HTTP GET 请求 req.send(null); //不带任何正文发送这个请求 //在返回数据之前,注册了一个事件处理函数,这个处理函数 //将会在服务器的相应返回至客户端的时候调用 //这种一部编程模型在客户端JavaScript中是非常常见的 req.onreadystatechange = function(){ if(req.readyState == 4 && req.status==200){ //如果代码运行到这里,说明我们得到了一个合法且完整的HTTP响应 var response=req.responseText; //HTTP响应是以字符串的形式呈现的 var lenders = JSON.parse(response); // 将其解析为js数组 //将数组中的放贷人对象转换为HTML字符串形式 var list = ‘‘; for(var i=0; i<lenders.length;i++){ list+="<li><a href=http://www.mamicode.com/‘".lenders[i].url+"‘>"+lenders[i].name+"</a>"; } //将数据在HTML元素中呈现出来 ad.innerHTML("<ul>"+list+"</ul>"); } } } /** * 在HTML<canvas>元素中用图表展示月度贷款余额、利息和资产收益 * 如果不传入参数的话,则清空之前的图表数据 */ function chart(principal,interest,monthly,payments){ var graph = document.getElementById(‘graph‘); //得到<canvas>标签 //graph.width = graph.width; //用一种巧妙的手法清除并重置画布 //如果不传入参数,或者浏览器不支持画布,则直接返回 if(arguments.length==0 || !graph.getContext) return; //获得画布元素的“context”对象,这个对象定义了一组绘画API 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)); } console.log(payments); //付款数据是一条从(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 thisMontsInterest = (principal-equity)*interest; equity+=(monthly-thisMontsInterest); //得到资产额 g.lineTo(paymentToX(p),amountToY(equity)); //将数据绘制到画布上 } g.lineTo(paymentToX(payments),amountToY(0)); 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 thisMonthsInterest = bal*interest; bal -= (monthly-thisMontsInterest); //得到资产额 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); //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) g.fillText(String(year),x,y-5); //每5年的数据 } //将赔付数额标记在右边界 g.textAlign = "right"; //文字右对齐 g.textBaseline = "middle"; //文字垂直居中 var ticks = [monthly*payments,principal ]; //我们要用到的两个点 var rightEdge = paymentToX(payments); //设置X坐标 for(var i=0; i<ticks.length; i++){ //对每两个点做循环 var y= amountToY(ticks[i]); //计算每个标记的Y坐标 g.fillRect(rightEdge-3,y-0.5,3,1); //绘制标记 g.fillText(String(ticks[i].toFixed(0)),rightEdge-5,y);//绘制文本 } } </script>
</body> </html>
javascript的一个简易利率计算器+js图像显示 代码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。