<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个JavaScript贷款计算器</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box !important;
}
input {
width: 200px;
height: 30px;
padding-left: 5px;
border: 1px solid #ddd;
}
table {
margin: 0px auto;
}
td, th {
font-size: 13px;
vertical-align: top;
}
</style>
</head>
<body>
<table>
<tr>
<th>Enter Loan Data:</th>
<td></td>
<th></th>
</tr>
<tr>
<td>Amount of the loan （贷款金额）：</td>
<td><input type="text" οnchange="calculate()" id="amount"/></td>
<td rowspan="8">
<canvas id="graph" width="400" height="250"></canvas>
</td>
</tr>
<tr>
<td>Annual interest（年利息）：</td>
<td><input type="text" οnchange="calculate()" id="apr"/></td>
</tr>
<tr>
<td>Repayment period（还款期）：</td>
<td><input type="text" οnchange="calculate()" id="years"/></td>
</tr>
<tr>
<td>Zipcode（邮政编码）：</td>
<td><input type="text" οnchange="calculate()" id="zipcode"/></td>
</tr>
<tr>
<td>Approximate（计算）：</td>
<td>
<button οnclick="calculate();">calculate</button>
</td>
</tr>
<tr>
<td>M：</td>
<td>$<span class="output" id="payment"></span></td>
</tr>
<tr>
<td>S：</td>
<td>$<span class="output" id="total"></span></td>
</tr>
<tr>
<td>B：</td>
<td>$<span class="output" id="totalinterest"></span></td>
</tr>
<tr>
<td>A：</td>
<td>
<div class="output" id="lenders"></div>
</td>
</tr>
</table>
<script type="text/javascript">
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);
//如果结果没有超过Javascript能表示的数字范围，且用户的输入也正确
//这里所展示的结果就是合法的
//isFinite() 函数用于检查其参数是否是无穷大。
if (isFinite(monthly)) {
//四舍五入到小数点后2位;
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, apr, years, zipcode);
} catch (e) {
//忽略
}
} else {
//表示结果不是数字或者是无穷大，则清空
payment.innerHTML = "错误";
total.innerHTML = "";
totalinterest.innerHTML = "";
chart();
}
//最后用图表显示
chart(principal,interest,monthly,payments);
}
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;
}
}
//localStorage HTML5本地储存 类似于Cookie
//加载完成执行还原用户数据方法
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) {
//如果浏览器不支持XMLHttpRequest对象，则退出
if (!window.XMLHttpRequest) {
return;
}
var ad = document.getElementById("lenders");
//元素没有则退出
if (!ad) {
return;
}
//编写url提交地址
var url = "get.php?" + "amount=" + encodeURIComponent(amount);
console.log(url);
//发起一个新的请求
var req = new XMLHttpRequest();
//处理数据的URL地址
req.open("GET", url);
//使用查询串中的数据
req.send(null);
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
//运行到这的时候说明已经得到了一个完整的HTTP响应
var response = req.responseText;
//将其解析成JS数组
var lenders = JSON.parse(response);
console.log("........跳过........");
}
}
}
//canvas 函数
//在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));
}
//付款数据是一条从（0，0）到（payments，payments*monthly）的直线
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"; //定义一种字体
g.fillText("图标",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)); //将数据线绘制至X轴
g.closePath(); //将线条结尾连接至线条开头
g.fillStyle="green"; //使用绿色绘制图形
g.fill(); //曲线之下的部分匀填充
g.fillText("qwe",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 Belance",20,50); //图例文字
g.textAlign="center";
// 不想写了，这只是复习而已。。。。。。。。好困......
}
</script>
</body>
</html>
06-30
920
920
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
