正文

Javascript权威指南——第一章Javascript概述

IP云
IP云V管理员/6 阅读
08/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

示例：javascript贷款计算器

相关技术：

1、如何在文档中查找元素；

2、如何通过表单input元素来获取用户的输入数据；

3、如何通过文档元素来设置HTML内容；

4、如何将数据存储在浏览器中；

5、如何使用脚本发起HTTP请求；

6、如何利用<canvas>元素绘图。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Javascript Loan Calculator</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>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>
<th>Approximate Payments:</th>
<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:
<div id="lenders"></div>
</td>
</tr>
</table>
<script type="text/javascript">
"use strict";//如果浏览器支持的话，开启ECMAScript 5的严格模式
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 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); 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;
}
}
function getLenders(amount, apr, years, zipcode) {
//如果浏览器不支持XMLHttpRequest对象，则退出
if (!window.XMLHttpRequest) {
return;
}
var ad = document.getElementById("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></li>";
}
ad.innerHTML = "<ul>" + list + "</ul>"
}
};
}
function chart(principal, interest, monthly, payments) {
var graph = document.getElementById("graph");
graph.width = graph.width;//巧妙手法清除并重置画布
if (arguments.length == 0 || !graph.getContext) {
//不传入参数，或浏览器不支持画布，直接返回
return;
} 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 = "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 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(0), amountToY(bal));
for (var p = 1; 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>

贷款计算器