<!doctype html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>javascript学习</title> <style> .output { font-weight: bold; } #payment { text-decoration: underline; } #graph { border: solid black 1px; } th,td { vertical-align: top; } </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="400" 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 payment: </td> <td> $ <span class="output" id="payment"> </span> </td> </tr> <tr> <td> total payment: </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 with one of these fine lenders: <p id="lenders"> </p> </td> </tr> </table> <script> 'use strict'; 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'); // 将百分比格式转化为小数格式，并从年利率转化为月利率 将年度赔付转化为月度赔付 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); var monthly = (principal * x * interest) / (x - 1); // 如果没超过js可以表示的数字范围，并且用户输入正确 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 = amount; } } // 文档首次加载时，将会尝试还原输入字段 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) { if (!window.xmlhttprequest) return; var ad = document.getelementbyid('lenders'); if (!ad) return; // 用户输入的数据进行url编码，并作为查询参数附加在url中 var url = 'getlenders.php' + '&?amt=' + encodeuricomponent(amount) + '&?apr=' + encodeuricomponent(apr) + '&?yrs=' + encodeuricomponent(years) + '&zip=' + encodeuricomponent(zipcode); // 通过xml对象提取返回数据 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); for (var i = 0; i < lenders.length; i++) { list += "<li><a href='" + lenders[i].url + "'>" + lenders[i].name + "</a>"; } ad.innerhtml = "<ul>" + list + "</ul>"; } } } // 在html的<canvas>中用图表展示月度贷款余额、利息和资产收益 // 如果不传入参数的话，则清空之前的图表数据 function chart(principal, interest, monthly, payments){ var graph = document.getelementbyid('graph'); 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)); } 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 = 'blod 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 thismonthsinterest = (principal - equity) * interest; equity += (monthly - thismonthsinterest); 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(p), amounttoy(bal)); for (var p = 0; p < payments; p++) { var thismonthsinterest = bal * interest; bal -= (monthly - thismonthsinterest); 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]; 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>
相关文章：
纯javascript代码实现计算器功能(三种方法)
javascript如何实现计算器功能
相关视频：
网页版计算器-8天学会 javascript视频教程
以上就是javascript脚本实现贷款计算器功能（代码全）的详细内容。
