犀牛书上的js贷款计算器（已经过调试）
来源：互联网 发布：互联网公司待遇知乎 编辑：程序博客网 时间：2024/06/10 12:28
<!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>运行效果：
0 0
- 犀牛书上的js贷款计算器（已经过调试）
- js权威指南里面的贷款计算器
- 1.2拓展--js贷款计算器
- 使用 js 实现 贷款计算器功能
- 贷款计算器的VBA实现代码
- 一个JavaScript实现的贷款计算器
- 贷款计算器的jsp表单页面
- 绝对详细的计算器--住房贷款、消费贷款计算器
- js犀牛书，学习心得笔记（一）
- 购房贷款计算器
- 二手房贷款计算器
- 两个贷款计算器
- JavaScript贷款计算器
- 2016/9/20已经结清的贷款解除卡号与贷款账号的关联关系
- js犀牛书
- S60模拟器下删除已经调试过的应用程序的方法。
- 调试出现"当前方法的代码已经过优化，因此无法计算表达式的值。" 解决方案
- 一个JavaScript贷款计算器【复习】
- linux环境变量设置
- Animation
- ubuntu12.04 freeswitch 安装
- ubuntu asterisk 安装
- 数组的几种定义方式及初始化
- 犀牛书上的js贷款计算器（已经过调试）
- ubuntu12.04 Erlang 安装
- redhat6.4日常操作规范
- ubuntu 12.04 rebar 安装
- erlang aliyun upload Oss
- pdf阅读器排行榜
- jQuery 弹窗
- Python memcache 上传数据
- 更改进程名字 prctl函数
