犀牛书上的js贷款计算器(已经过调试)
2015-10-23 09:54
573 查看
<!DOCTYPE html> <html> <head> <title>JavaScript Loan Calculator</title> <style> .output{font-weight:bold;} #payment{text-decoration:underline;} #graph{border:solid black 1px;} th,td{vertical-align:center;} </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='470' 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 Payments:</td> <td>$<span class='output' id='payment'></span></td> </tr> <tr> <td>Total Payments:</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 colspan=2> Apply for your loan width one of these fine lenders: <div id='lenders'><div> </td> </tr> </table> <script type="text/javascript"> "use strict"; function $(id){ return document.getElementById(id); } function calculate (){ var amount = $('amount'); var apr = $('apr'); var years = $('years'); var zipcode = $('zipcode'); var payment = $('payment'); var total = $('total'); var totalinterest = $('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);// power method. 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(); } } 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){ $('amount').value = localStorage.loan_amount; $('apr').value = localStorage.loan_apr; $('years').value = localStorage.loan_years; $('zipcode').value = localStorage.loan_zipcode; } } function getLenders(amount,apr,years,zipcode){ if(!window.XMLHttpRequest)return ; var ad = $('lenders'); if(!ad)return; var url = 'getLenders.php' + '?amt='+ encodeURIComponent(amount)+ '&apr='+ encodeURIComponent(apr)+ '&yrs='+ encodeURIComponent(years)+ '&zip='+ encodeURIComponent(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'; } } } function chart(principal,interest,monthly,payments){ var graph = $('graph'); graph.width = graph.width; if(arguments.length==0|| !graph.getContext)return ; 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*payments*1.05)); } 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)); 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("Total Balance",20,50); 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]; 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>
运行效果:
相关文章推荐
- DOM树
- JavaScript原始类型和引用类型
- c#与JavaScript实现对用户名、密码进行RSA非对称加密
- JS类库收罗
- CDH安装oozie页面缺少Ext JS library
- javascript === 与 ==
- ITIM二次开发:Workflow之JavaScriptExtension
- JavaScript权威指南_169_第17章_事件处理_17.3-调用事件处理程序-事件传播、事件取消
- 【bzoj1012】[JSOI2008]最大数maxnumber st表
- js alert()后进行跳转的方法
- DOM scripting: web design with javascript and DOM
- jsp 页面缓存 showModalDialog 模态窗口
- Ember.js 入门指南——自定义适配器
- js中cookie的使用详细分析
- 日常收集JS邮箱验证正则表达式
- asp.net中javascript与后台c#交互
- js计算文本框输入的字符数
- 深入浅析javascript立即执行函数
- JavaScript代码轻松实现网页内容禁止复制(代码简单)
- javascript跨域的方法汇总