示例：javascript贷款计算器
相关技术：
1、如何在文档中查找元素；
2、如何通过表单input元素来获取用户的输入数据；
3、如何通过文档元素来设置HTML内容；
4、如何将数据存储在浏览器中；
5、如何使用脚本发起HTTP请求；
6、如何利用<canvas>元素绘图。
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3<html> 4<head> 5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 6 <title>Javascript Loan Calculator</title> 7 <style type="text/css"> 8 .output { 9 font-weight: bold; 10 } 11 12 #payment { 13 text-decoration: underline; 14 } 15 16 #graph { 17 border: solid black 1px; 18 } 19 20 th, td { 21 vertical-align: top; 22 } 23 </style> 24</head> 25<body> 26<table> 27 <tr> 28 <th>Enter Loan Data:</th> 29 <td></td> 30 <th>Loan Balance, Cumulative Equity, and Interest Payments</th> 31 </tr> 32 <tr> 33 <td>Amount of the loan ($):</td> 34 <td><input id="amount" onchange="calculate();"/></td> 35 <td rowspan="8"> 36 <canvas id="graph" width="400" height="250"></canvas> 37 </td> 38 </tr> 39 <tr> 40 <td>Annual interest (%):</td> 41 <td><input id="apr" onchange="calculate();"/></td> 42 </tr> 43 <tr> 44 <td>Repayment period (years):</td> 45 <td><input id="years" onchange="calculate();"/></td> 46 </tr> 47 <tr> 48 <td>Zipcode (to find lenders):</td> 49 <td><input id="zipcode" onchange="calculate();"/></td> 50 </tr> 51 <tr> 52 <th>Approximate Payments:</th> 53 <td> 54 <button onclick="calculate();">Calculate</button> 55 </td> 56 </tr> 57 <tr> 58 <td>Monthly payment:</td> 59 <td>$<span class="output" id="payment"></span></td> 60 </tr> 61 <tr> 62 <td>Total payment:</td> 63 <td>$<span class="output" id="total"></span></td> 64 </tr> 65 <tr> 66 <td>Total interest (%):</td> 67 <td>$<span class="output" id="totalinterest"></span></td> 68 </tr> 69 <tr> 70 <th>Sponsors:</th> 71 <td colspan="2">Apply for your loan with one of these fine lenders: 72 <div id="lenders"></div> 73 </td> 74 </tr> 75</table> 76<script type="text/javascript"> 77 "use strict";//如果浏览器支持的话，开启ECMAScript 5的严格模式 78 window.onload = function () { 79 //如果浏览器支持本地存储，则获取上次保存数据 80 if (window.localStorage && localStorage.loan_amount) { 81 document.getElementById("amount").value = localStorage.loan_amount; 82 document.getElementById("apr").value = localStorage.loan_apr; 83 document.getElementById("years").value = localStorage.loan_years; 84 document.getElementById("zipcode").value = localStorage.loan_zipcode; 85 } 86 }; 87 function calculate() { 88 var amount = document.getElementById("amount"); 89 var apr = document.getElementById("apr"); 90 var years = document.getElementById("years"); 91 var zipcode = document.getElementById("zipcode"); 92 var payment = document.getElementById("payment"); 93 var total = document.getElementById("total"); 94 var totalinterest = document.getElementById("totalinterest"); 95 96 var principal = parseFloat(amount.value); 97 var interest = parseFloat(apr.value) / 100 / 12;//百分比转为小数，年利率转为月利率 98 var payments = parseFloat(years.value) * 12;//年度赔付转为月度赔付 99 100 //计算月度赔付数据 101 var x = Math.pow(1 + interest, payments); 102 var monthly = (principal * x * interest) / (x - 1); 103 104 if (isFinite(monthly)) { 105 payment.innerHTML = monthly.toFixed(2); 106 total.innerHTML = (monthly * payments).toFixed(2); 107 totalinterest.innerHTML = ((monthly * payments) - principal).toFixed(2); 108 109 //保存用户数据 110 save(amount.value, apr.value, years.value, zipcode.value); 111 112 //展示本地放贷人 113 try { 114 getLenders(amount.value, apr.value, years.value, zipcode.value); 115 } catch (e) { 116 117 } 118 chart(principal, interest, monthly, payments); 119 } else { 120 payment.innerHTML = ""; 121 total.innerHTML = ""; 122 totalinterest.innerHTML = ""; 123 chart();//清空图表 124 } 125 } 126 function save(amount, apr, years, zipcode) { 127 if (window.localStorage) { 128 //浏览器支持本地存储 129 localStorage.loan_amount = amount; 130 localStorage.loan_apr = apr; 131 localStorage.loan_years = years; 132 localStorage.loan_zipcode = zipcode; 133 } 134 } 135 function getLenders(amount, apr, years, zipcode) { 136 //如果浏览器不支持XMLHttpRequest对象，则退出 137 if (!window.XMLHttpRequest) { 138 return; 139 } 140 var ad = document.getElementById("lenders"); 141 if (!ad) { 142 return; 143 } 144 145 var url = "getLenders.php" + "?amt=" + encodeURIComponent(amount) + "&apr=" + encodeURIComponent(apr) + 146 "&yrs=" + encodeURIComponent(years) + "&zip=" + encodeURIComponent(zipcode); 147 var req = new XMLHttpRequest(); 148 req.open("GET", url); 149 req.send(null); 150 req.onreadystatechange = function () { 151 if (req.readyState == 4 && req.status == 200) { 152 var response = req.responseText; 153 var lenders = JSON.parse(response); 154 var list = ""; 155 for (var i = 0; i < lenders.length; i++) { 156 list += "<li><a href='" + lenders[i].url + "'>" + lenders[i].name + "</a></li>"; 157 } 158 ad.innerHTML = "<ul>" + list + "</ul>" 159 } 160 }; 161 } 162 function chart(principal, interest, monthly, payments) { 163 var graph = document.getElementById("graph"); 164 graph.width = graph.width;//巧妙手法清除并重置画布 165 if (arguments.length == 0 || !graph.getContext) { 166 //不传入参数，或浏览器不支持画布，直接返回 167 return; 168 } 169 170 var g = graph.getContext('2d'); 171 var width = graph.width; 172 var height = graph.height; 173 174 //将付款数字和美元数据转换为像素 175 function paymentToX(n) { 176 return n * width / payments; 177 } 178 179 function amountToY(a) { 180 return height - (a * height / (monthly * payments * 1.05)); 181 } 182 183 g.moveTo(paymentToX(0), amountToY(0));//从左下方开始 184 g.lineTo(paymentToX(payments), amountToY(monthly * payments));//绘至右上方 185 g.lineTo(paymentToX(payments), amountToY(0));//再至右下方 186 g.closePath();//将结尾连接至开头 187 g.fillStyle = "#f88";//亮红色 188 g.fill();//填充矩形 189 g.font = "bold 12px sans-serif";//定义字体 190 g.fillText("Total Interest Payments", 20, 20);//将文字绘制到图中 191 192 var equity = 0; 193 g.beginPath();//开始绘制新图形 194 g.moveTo(paymentToX(0), amountToY(0));//从左下方开始 195 for (var p = 1; p <= payments; p++) { 196 //赔付利息 197 var thisMonthsInterest = (principal - equity) * interest; 198 equity += (monthly - thisMonthsInterest); 199 g.lineTo(paymentToX(p), amountToY(equity)); 200 } 201 g.lineTo(paymentToX(payments), amountToY(0)); 202 g.closePath(); 203 g.fillStyle = "green"; 204 g.fill(); 205 g.fillText("Total Equity", 20, 35); 206 207 var bal = principal; 208 g.beginPath(); 209 g.moveTo(paymentToX(0), amountToY(bal)); 210 for (var p = 1; p <= payments; p++) { 211 var thisMonthsInterest = bal * interest; 212 bal -= (monthly - thisMonthsInterest); 213 g.lineTo(paymentToX(p), amountToY(bal)); 214 } 215 g.lineWidth = 3; 216 g.stroke(); 217 g.fillStyle = 'black'; 218 g.fillText("Loan Balance", 20, 50); 219 //X轴 220 g.textAlign = "center"; 221 var y = amountToY(0); 222 for (var year = 1; year * 12 <= payments; year++) { 223 var x = paymentToX(year * 12); 224 g.fillRect(x - 0.5, y - 3, 1, 3); 225 if (year == 1) { 226 g.fillText("Year", x, y - 5); 227 } 228 if (year % 5 == 0 && year * 12 !== payments) { 229 g.fillText(String(year), x, y - 5); 230 } 231 } 232 //赔付数额标记在有边界 233 g.textAlign = 'right'; 234 g.textBaseline = 'middle'; 235 var ticks = [monthly * payments, principal]; 236 var rightEdge = paymentToX(payments); 237 for (var i = 0; i < ticks.length; i++) { 238 var y = amountToY(ticks[i]); 239 g.fillRect(rightEdge - 3, y - 0.5, 3, 1); 240 g.fillText(String(ticks[i].toFixed(0)), rightEdge - 5, y); 241 } 242 } 243</script> 244</body> 245</html>
贷款计算器